[HTML/CSS/JS] Input , textarea 대신 contenteditable="true" 사용

---

개발을 하다보면 어떤 파라미터값을 받아와 화면에 뿌리고 싶을때가 있다. 

그럴때 보통 <input type="text"> 혹은 <textarea> 를 많이 사용한다. 

오늘은 이 두가지의 사용법이외의 div를 사용한 기능을 소개하려고 한다. 

div 편집 기능이라고 생각해주면 쉽다 

 

내가 input이나 textarea를 사용하지 않은 이유는 불러오는 파라미터값에 이미지를 붙이고 싶었고, 글자 정렬을 할때 박스의 맨 상단에 값을 불러오고 싶었기 때문이다

1) Input을 사용할경우 이미지를 불러올 순 있지만, input 높이를 크게 잡으면 글자도 가운데 정렬로 배치가 되버린다

2) 글자를 상단에 올리기 위해 <textarea>를 사용하게 되면 이미지를 삽입할 수가 없게 되는 단점이 있다. 

따라서 이미지를 불러오되, 글자의 정렬을 좀 더 편하게 만들기 위해 contenteditable="true"의 기능을 사용하게 되었다.

---

1. div 태그 안에 contenteditable 사용

<div class="testEditable" contenteditable="true"></div>
<div class="testEditable" contenteditable="false"></div>

contenteditable ="true" 빈 문자열은 요소가 편집 가능

contenteditable ="false" 편집 불가능 

true or false를 사용하지않고 빈값을 넣었을 경우에는 빈 문자열로 인식함 

 

하지만 이렇게 태그만 쓴다고 했을경우 입력하는 창이 잘 안보일 수 있다. 따라서 .css 를 활용하여 내가 만들고 싶은

에디터의 형태를 잡아주고 js에 contenteditable="true"에 관련된 내용을 추가해주기 

 

2. css 를 통해 원하는 에디터의 형태 잡아주기 

div.testEditable {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    overflow-y: auto;
    background-color:black;
    font-size: 12px;
    color:blue;
}

3. js에 contenteditable="true"내용 추가해주기 

$('.testEditable').each(function(){
	this.contentEditable = true;
});

실행을 하게 되면 아래와  같이 글을 편집할 수 있는 편집기능이 생긴다. 

실행결과

 

이때 javascript나 jquery를 이용해 전달받은 파라미터 값을 편집기 안에 불러오는 것 또한 추가해볼 수 있다.