본문 바로가기

Local Oriented/jQuery

form 문에서 Enter(엔터, 리턴 Return) 작동하지 않게 하기..

$(document).keypress(function(e) {

  if (e.keyCode == 13)

    e.preventDefault();

});



----------------------------------------------------------------------------

form 문에 input 이 1개만 존재하는 경우,

input 안에 엔터 문자가 들어오면 submit 이 자동으로 실행된다고 하네요(w3 HTML 스펙).


<form>

 <input name="content" id="content" />

</form>



상기 form 문의 content 에 프롬프트가 있고 키보드에서 엔터를 눌렀을 때 submit 되지 않게 않게 하려면..?

아래 코드와 같이 키값이 엔터일 때 return false; 를 하면 되겠군요.

return false 가 아니라 return 을 하는 경우 화면이 Refresh 되어서 입력된 값이 없어져요.. ㅋ

만약 form 문이 하나라면 $('form').keypress(...) 라고 하면 되겠지만, form 문이 여럿일 수도 있잖아요.

<script>

 $(document).ready(function(){

   $('#content').keypress(function(e){

     if(e.keyCode==13) return false;

   });

 });

</script>



엔터를 누를 때 content 값이 없으면 메시징하고, 값이 있으면 무언가 작업하게 하려면..?

아래 코드와 같이 코드를 추가하는데.. functionB 가 2번 실행.. ㅠ.

<script>

  $(document).ready(function(){

    $('#content').keypress(function(e){

      if(e.keyCode==13){

        if($(this).val()==''){

          alert('내용을 입력해 주세요. ');

          return false;

        }else functionB(); // functionB 가 submit 을 통제하는 함수라면..

      }

    });

 });

</script>



위와 같이 하면 functionB() 가 실행되고 다시 submit 이 호출되기 때문에

return false 는 아래와 같이 e.keyCode 가 엔터인지 확인하는 문장 마지막에 기술.

<script>

  $(document).ready(function(){

    $('#content').keypress(function(e){

      if(e.keyCode==13){

        if($(this).val()=='') alert('글을 입력해 주세요. ');

        else functionB();

        return false;

      }

    });

  });

</script>