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

250

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

javascript jquery jquery-events Нажмите Upvote
источник

446

Вы можете подключить свое собственное событие

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

http://jsfiddle.net/x7HVQ/

Джишну А.П.
источник

11

Стоит отметить, что в сценарии обнаружения ввода для предотвращения отправки формы событие «keyup» не является оптимальным, поскольку форма обнаруживает отправку при нажатии клавиши. Таким образом, «нажатие клавиши» или «нажатие клавиши» может быть лучше в этом случае.

TechNyquist

7

Обратите внимание, что bind () устарела в jQuery 3.0.

Барт Фридрихс

Разные браузеры имеют разные e.keyCodeключи для некоторых, лучше использовать e.which, это гарантирует, что вы будете обрабатывать одну и ту же кнопку в каждом браузере

Олег Шахов

99

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

Этьен Дюпюи
источник

8

Спасибо. Это решение соответствует моему варианту использования. Однако стоит отметить, что после выполнения любой обработки вы можете добавить `$ (this) .removeAttr (" disabled ");` для повторного включения текстового поля.

Господин

39

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

Нафтали ака Нил
источник

Ницца. Гораздо проще, чем тот URL, который я разместил. Интересно, что, черт возьми, я написал в этой статье и почему так много кода?

CaptSaltyJack

1

Слишком поздно, я уже написал свой: P. Это также делает ту же самую работу в меньшем количестве строк ... также, использование $переменной для плагина не является хорошей идеей, поскольку это может вызвать конфликты.

Нажмите Upvote

@ Нил, ты знаешь, как нужно было бы изменить код плагина, который я разместил в принятом ответе, чтобы это можно было сделать, $("#myInput").bind('click, onEnter', myCallback);и он работал бы, не требуя ничего другого?

Нажмите Upvote

1

@ClickUpvote # 1: удалите его из ответа - тогда мы можем поговорить.

Нафтали ака Нил

@ Нил Удивительное решение человек. Я только что скопировал эту функцию! Спасибо!

Билал Фазлани

17

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

jzilla
источник

2

Хорошо, я бы вызвал функцию обратного вызова, используя func.apply(this)эту функцию внутри функции обратного вызова, которую вы можете использовать thisкак обычно, чтобы получить доступ к элементу, для которого было инициировано событие.

Нажмите Upvote

да, хорошее замечание о func.apply (это), даже не учел этого.

Jzilla

Красиво и кратко, но я бы добавил, что в большинстве случаев было бы неплохо остановить распространение и значения по умолчанию, чтобы предотвратить отправку любой формы. Просто добавьте e.preventDefault(); e.stopPropagation();внутрь if (e.keyCode)немного.

Irongaze.com

8

Следует отметить, что использование 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>

Джошуа Бернс
источник

4

Если вы searchвводите, вы также можете использовать on 'search'событие. пример

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

,

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

Фан Ван Линь
источник

3

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

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

Йогеш Лодха
источник

2

Еще один тонкий вариант. Я пошел на небольшое разделение полномочий, поэтому у меня есть плагин, позволяющий ловить клавишу ввода, а затем я просто привязываюсь к событиям:

(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 */ });

Wilco
источник

0

Я не смог запустить keypressсобытие для кнопки ввода и почесал голову некоторое время, пока не прочитал документы jQuery:

« Событие нажатия клавиши отправляется элементу, когда браузер регистрирует ввод с клавиатуры. Это похоже на событие нажатия клавиши, за исключением того, что клавиши-модификаторы и непечатаемые клавиши, такие как Shift, Esc, и удаляют события нажатия клавиши запуска, но не события нажатия клавиши. » ( https://api.jquery.com/keypress/ )

Мне пришлось использовать событие keyupили, keydownчтобы поймать нажатие кнопки ввода.

Арне М
источник

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

Ответы: