[javascript] 텍스트 상자에 Enter 키를 누르는 사용자를위한 JQuery 이벤트?

Jquery에 사용자가 텍스트 상자의 Enter 버튼을 눌렀을 때만 트리거되는 이벤트가 있습니까? 또는 이것을 추가하기 위해 추가 할 수있는 플러그인이 있습니까? 그렇지 않다면 어떻게하면 빠른 플러그인을 작성합니까?

답변

당신은 당신의 자신의 사용자 정의 이벤트를 연결할 수 있습니다

$('textarea').bind("enterKey",function(e){
   //do stuff here
});
$('textarea').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

http://jsfiddle.net/x7HVQ/

답변

   $('#textbox').on('keypress', function (e) {
         if(e.which === 13){

            //Disable textbox to prevent multiple submit
            $(this).attr("disabled", "disabled");

            //Do Stuff, submit, etc..

            //Enable the textbox again if needed.
            $(this).removeAttr("disabled");
         }
   });

답변

플러그인은 다음과 같습니다. (Fiddle : http://jsfiddle.net/maniator/CjrJ7/ )

$.fn.pressEnter = function(fn) {

    return this.each(function() {
        $(this).bind('enterPress', fn);
        $(this).keyup(function(e){
            if(e.keyCode == 13)
            {
              $(this).trigger("enterPress");
            }
        })
    });
 };

//use it:
$('textarea').pressEnter(function(){alert('here')})

답변

여기 jquery 플러그인이 있습니다.

(function($) {
    $.fn.onEnter = function(func) {
        this.bind('keypress', function(e) {
            if (e.keyCode == 13) func.apply(this, [e]);
        });
        return this;
     };
})(jQuery);

사용하려면 코드를 포함시키고 다음과 같이 설정하십시오.

$( function () {
    console.log($("input"));
    $("input").onEnter( function() {
        $(this).val("Enter key pressed");
    });
});

여기에 jsfiddle http://jsfiddle.net/VrwgP/30/

답변

해야 잘 지적 를 사용하는 것이 live()jQuery를에가되었습니다 되지 버전 이후 1.7및되었습니다 제거 jQuery를에 1.9. 대신 사용하는 on()것이 좋습니다.

다음과 같은 잠재적 인 문제를 해결하므로 다음과 같은 바인딩 방법론을 적극 권장합니다.

이벤트를에 바인딩하고 document.body$ selector를 두 번째 인수로 전달하면 on()리 바인딩 또는 이중 바인딩 이벤트를 처리하지 않고도 DOM에서 요소를 연결, 분리, 추가 또는 제거 할 수 있습니다. 이는 이벤트가 직접 이 document.body아닌 연결되어 있기 때문에 추가, 제거 및 다시 추가 할 수 있으며 이벤트에 바인딩 된 이벤트를로드하지 않음을 의미합니다.$selector$selector
off()before 를 호출 on()하면이 스크립트는 실수로 이중 바인딩 이벤트에 대해 걱정할 필요없이 페이지 본문 또는 AJAX 호출 본문 내에있을 수 있습니다.
내에 스크립트를 래핑하면 $(function() {...})이 스크립트를 페이지의 본문 또는 AJAX 호출의 본문에서 다시로드 할 수 있습니다. $(document).ready()AJAX 요청에 대해서는 발생 $(function() {...})하지 않습니다.

예를 들면 다음과 같습니다.

<!DOCTYPE html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var $selector = $('textarea');

        // Prevent double-binding
        // (only a potential issue if script is loaded through AJAX)
        $(document.body).off('keyup', $selector);

        // Bind to keyup events on the $selector.
        $(document.body).on('keyup', $selector, function(event) {
          if(event.keyCode == 13) { // 13 = Enter Key
            alert('enter key pressed.');
          }
        });
      });
    </script>
  </head>
  <body>

  </body>
</html>

답변

입력이 search인 경우 on 'search'event 를 사용할 수도 있습니다 . 예

<input type="search" placeholder="Search" id="searchTextBox">

$("#searchPostTextBox").on('search', function () {
    alert("search value: "+$(this).val());
});

답변

HTML 코드 :-

<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />

<input type="button" id="btnclick">

자바 스크립트 코드

function AddKeyPress(e) {
        // look for window.event in case event isn't passed in
        e = e || window.event;
        if (e.keyCode == 13) {
            document.getElementById('btnEmail').click();
            return false;
        }
        return true;
    }

양식에 기본 제출 버튼이 없습니다