Событие JQuery для пользователя нажатие enter в текстовом поле?

Question

Событие JQuery для пользователя нажатие enter в текстовом поле?

есть ли какое-либо событие в Jquery, которое запускается только в том случае, если пользователь нажимает кнопку ввода в текстовом поле? Или любой плагин, который может быть добавлен, чтобы включить это? Если нет, то как бы я написать плагин, который будет это делать?

777 7

jQuery javascript javascript-events

7 ответов:

Comments

Ничего не найдено.

Jishnu A P · Accepted Answer · 2013-08-28 08:24:48

вы можете подключить свое собственное событие
$('textarea').bind("enterKey",function(e){
   //do stuff here
});
$('textarea').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});
http://jsfiddle.net/x7HVQ/

Etienne Dupuis · Accepted Answer · 2017-04-27 18:04:17

   $('#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");
         }
   });

Neal · Accepted Answer · 2011-06-29 20:08:08

вот плагин для вас: (Скрипка: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')})

jzilla · Accepted Answer · 2011-06-29 21:23:01

вот плагин 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/

Joshua Burns · Accepted Answer · 2014-02-25 05:56:20

он должен быть!--16-->хорошо отметили что использование live() в jQuery было не рекомендуется начиная с версии 1.7 и удалены в jQuery 1.9. Вместо этого, использование on() рекомендуется.

я бы настоятельно предложил следующую методологию привязки, поскольку она решает следующие потенциальные проблемы:

путем привязки события к document.body и передача $ selector в качестве второго аргумента on(), элементы могут быть присоединены, отсоединены, добавлены или удалены из DOM без необходимости иметь дело с повторной привязки или двойной привязки событий. Это происходит потому, что событие прикреплено к document.body, а не $selector напрямую, что означает $selector можно добавлять, удалять и добавлять снова и никогда не будет загружать событие, привязанное к нему.

по телефону off() до 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>

yogesh lodha · Accepted Answer · 2016-06-01 07:49:59

HTML-код:-

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

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

Java Script Code

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;
    }

ваша форма не имеет кнопки отправки по умолчанию

Wilco · Accepted Answer · 2014-04-25 18:16:44

еще одна тонкая вариация. Я пошел на небольшое разделение полномочий, поэтому у меня есть плагин, который позволяет ловить ключ enter, тогда я просто привязываюсь к событиям нормально:
(function($) { $.fn.catchEnter = function(sel) {  
    return this.each(function() { 
        $(this).on('keyup',sel,function(e){
            if(e.keyCode == 13)
              $(this).trigger("enterkey");
        })
    });  
};
})(jQuery);
и затем в использовании:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });
этот вариант позволяет использовать делегирование событий (для привязки к элементам не создан еще).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });