키보드이벤트 3가지
- keydown : 키가 눌렸을때 (값 : keycode)
- keypress : 키가 눌린 상태일 때 (연속적으로 실행) (값 : ASCII)
- keyup : 키 누름이 해제될 때 (값 : keycode)
내가 구현하고 싶은 부분은 엔터를 쳤을때 메서드가 실행되고(ajax)
줄바꿈은 shift + enter로 구현하고 싶었다.
// Making Title of Board editable 편집 가능한 보드 제목 만들기
// ------------------------------
$(".kanban-title-board").on("click", function () {
$(this).attr("contenteditable", "true");
$(this).addClass("line-ellipsis");
// id 추가하기
$(this).attr("id", "kanban-title-board");
// 선택한 id를 변수에 담기 (이 id는 업무리스트의 데이터베이스 PK이다)
$id = $(this)
.closest(".kanban-board")
.attr("data-id");
// 디버깅
console.log("data-id : " + $id);
});
// 업무리스트 수정
// ------------------------------
////////////////////////////////////////////////////////////////////////
//////////////////////// 엔터처리부분 시작 ////////////////////////
////////////////////////////////////////////////////////////////////////
$(".kanban-title-board").on("keydown", function (event) {
if(event.keyCode === 13){
// 업무리스트 쉬프트 + 엔터 클릭시 줄바꿈
if(!event.shiftKey){
event.preventDefault();
}
// 디버깅
// alert('엔터키 이벤트');
// 엔터를 누르는 동시에 현재 안에 값을 value로 저장한다.
$(this).attr("value", document.getElementById('kanban-title-board').innerHTML);
// value를 변수에 담는다.
$value = $(this)
.attr("value");
// 디버깅
console.log("value : " + $value);
$.ajax({
async : false,
type : 'POST',
url : '/safari/updateTaskList',
data : {
tasklistNo : $id,
tasklistTitle : $value,
},
success : function(json){
console.log("id값 여기에 들어와야함 : " + $id);
if(json != 'ok'){
alert('업무리스트 수정을 실패했습니다.');
return;
} else {
alert('업무리스트 수정을 성공했습니다.');
}
}
});
}
});