본문 바로가기

contenteditable="true" 옵션

이전에는 뭔가를 입력을 해야 한다면 무조건 input 타입을 써서 입력을 하거나 textarea를 했다.

물론 지금도 그러하지만.

다양한 실시간 값이나 입력을 요해서 변경을 해야 할 경우에 요즘 들어 한번 테스트 해보고 있는것이 바로

contenteditable="true" 옵션이다.

div 같은 엘리먼트에 설정을 두고 입력을 하게 한 다음에 입력이 끝나면 ajax나 디비 처리등을 해서 가공을 한다.

편하고도 재미있는 기능이다.

<div id='edit' contenteditable='true'>입력하세요</div>

jquery 등으로 토글을 할 경우는

attr옵션을 이용하면 된다.


$('#edit').attr('contenteditable', 'true');

$('#edit').attr('contenteditable', 'false');

이벤트는 change등을 활용해서 처리를 해보자.

trigger

addEventListener('input', function(){

처리

});

찾아보면 jquery.editable.js로 플럭인으로 누가 만들어 놓은 부분도 있다.