[HTML] contenteditable 이용, div 편집 가능하도록 하기

보통 웹페이지에 뭔가를 적는 칸이 있는걸 보면 거의 input이나 textarea일 것이다.

하지만 div나 다른 요소도 편집을 하고 싶을 때가 있다.

그럴 경우 html 태그 안에 contenteditable='true'를 적어주면 해결된다.

예를 들면 다음과 같다.

 

<div contenteditable="true">편집가능</div>

실제로 적용한 태그를 밑에 써봤다.

편집가능

 

해당 태그를 클릭하면 파란색 테두리가 생기는데 이걸 안생기게 하려면 스타일에 outline:none;을 적어주면 된다.

 

그리고 단순히 편집가능하게 해놓는건 큰 의미가 없고 이걸 이벤트와 연관시키는게 도움이 된다.

여기서 적용할만한 이벤트는 blur, focus, keypress 등이 있다.

 

일단 처음 클릭해서 커서가 생기도록 하는 그 동작은 focus, 그런 다음 다른 곳을 클릭하여 커서를 사라지게 만드는건 blur, 커서가 생긴 상태에서 키보드를 누르는건 keypress (or keyup, keydown)이 되겠다.

 

이벤트까지 간단하게 적용시킨 예제는 다음과 같을 것이다.

그냥 간단히 value 변경: 뒤의 글자를 클릭하면 마치 input 처럼 모양이 변하고 다른 곳을 클릭하거나 엔터키를 누르면 위에 있는 value: 뒤의 내용이 바뀌는 예제다.

내 생각에 트렐로(Trello)의 편집 기능도 이런걸 이용하지 않았을까 생각이 들었다.

<div>value: <span id='val'>juragi</span></div>
value 변경: <span contenteditable="true" id="editable" style="padding:3px;">juragi</span>
<br/><span id="eventName"></span>
<script>
    $(function(){
        $("#editable").focus(function(){
            $("#eventName").text("focus");
            $(this).css("border", "1px solid");
        });
        $("#editable").blur(function(){
            $("#val").text($(this).text());
            $("#eventName").text("blur");
            $(this).css("border", "initial");
        });
        $("#editable").keypress(function(e){
            $("#eventName").text("keypress");
            if(e.which === 13) {
                e.preventDefault();
                $(this).blur();
            }
        });
    });
</script>

value: juragi

value 변경: juragi