[JS] 엔터 이벤트

조승현·2022년 9월 20일
0

키보드이벤트 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('업무리스트 수정을 성공했습니다.');
				}
			}
		});	
	}
  });
profile
소통을 좋아하는 개발자입니다

0개의 댓글