이전에는 뭔가를 입력을 해야 한다면 무조건 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로 플럭인으로 누가 만들어 놓은 부분도 있다.