Jquery: как вызвать событие нажатия при нажатии клавиши ввода

165

Мне нужно выполнить событие нажатия кнопки при нажатии клавиши ввода.

Как и на данный момент, событие не стреляет.

Пожалуйста, помогите мне с синтаксисом, если это возможно.

$(document).on("click", "input[name='butAssignProd']", function () {
   //all the action
});

это моя попытка запустить событие click при вводе.

$("#txtSearchProdAssign").keydown(function (e) {
  if (e.keyCode == 13) {
    $('input[name = butAssignProd]').click();
  }
});

jquery key-events Arianule
источник

Возможно, вам придется включить возвращение false илиe.preventDefault();

geekchic

4

Как примечание: e.keyCodeне полностью кросс-браузер. используйте e.whichвместо.

Хашем Колами

4

В этом случае вы ДОЛЖНЫ использовать keyupвместо keypressили keydown. keypress/ keydownсобытия запускаются непрерывно, пока нажата клавиша: jsbin.com/uzoxuk/1/edit

Хашем Колами

307

попробуй это ....

$('#txtSearchProdAssign').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

Показать фрагмент кода

$(function() {

  $('input[name="butAssignProd"]').click(function() {
    alert('Hello...!');
  });

  //press enter on text area..

  $('#txtSearchProdAssign').keypress(function(e) {
    var key = e.which;
    if (key == 13) // the enter key code
    {
      $('input[name = butAssignProd]').click();
      return false;
    }
  });

});

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <textarea id="txtSearchProdAssign"></textarea>
  <input type="text" name="butAssignProd" placeholder="click here">
</body>

</html>

Развернуть фрагмент

Найти демоверсию в jsbin.com

Виджай
источник

3

В случае, если люди хотят распознать нажатие клавиши «ввод» из любого места, вы можете заменить $ ('# txtSearchProdAssign') и активировать документ $ (document) .keypress .......

dave4jr

Выглядит сомнительно с точки зрения доступности. Будет ли это определенно работать на всех видах устройств, имеющих разные методы «выбора»?

Джонни

27

Попробуй это

$('#twitterSearch').keydown(function(event){ 
    var keyCode = (event.keyCode ? event.keyCode : event.which);   
    if (keyCode == 13) {
        $('#startSearch').trigger('click');
    }
});

Надеюсь, это поможет вам

Нирадж Дубей
источник

4

Вы имели в виду if((event.keyCode || event.which) == 13)? да, это полностью кросс-браузер, который поддерживает Tabключ в FF.

Всевышний Колами

Согласно API , event.keyCodeэто избыточно, просто используйте event.which.

Коняк

12

$('#txtSearchProdAssign').keypress(function (e) {
  if (e.which == 13) {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

Я также только что нашел Отправку формы на «Enter», которая охватывает большинство вопросов всесторонне.

geekchic
источник

8

Вы были почти там. Вот что вы можете попробовать, хотя.

$(function(){
  $("#txtSearchProdAssign").keyup(function (e) {
    if (e.which == 13) {
      $('input[name="butAssignProd"]').trigger('click');
    }
  });
});

Я использовал, trigger()чтобы выполнить щелчок и привязать его к keyupсобытию, keydownпотому что clickсобытие состоит из двух событий, то есть mousedownтогда mouseup. Так что напоминать вещи так же, как это возможноkeydown и keyup.

Вот демо

Rohit416
источник

4

Еще одно дополнение, чтобы сделать:

Если вы динамически добавляете входные данные, например, используя append(), вы должны использовать on()функцию jQuery .

$('#parent').on('keydown', '#input', function (e) {
    var key = e.which;
    if(key == 13) {
        alert("enter");
        $('#button').click();
        return false;
    }
});

ОБНОВИТЬ:

Еще более эффективный способ сделать это - использовать оператор switch. Вы также можете найти это чище.

Разметка:

<div class="my-form">
  <input id="my-input" type="text">
</div>

JQuery:

$('.my-form').on('keydown', '#my-input', function (e) {
  var key = e.which;
  switch (key) {
  case 13: // enter
    alert('Enter key pressed.');
    break;
  default:
    break;
  }
});

Дэниел Дьюхерст
источник

1

IMO, использующий оператор switch для одного условия, является излишним.

nyuszika7h

Хотя это более эффективно, чем утверждение if.

Дэниел Дьюхерст

2

Я тебе не верю. Можете ли вы привести источник?

Рольф

3

Вы пытаетесь имитировать нажатие кнопки при нажатии клавиши ввода? Если это так, вам может понадобитьсяtrigger синтаксис.

Попробуйте изменить

$('input[name = butAssignProd]').click();

в

$('input[name = butAssignProd]').trigger("click");

Если это не проблема, попробуйте еще раз взглянуть на синтаксис захвата клавиш, посмотрев на решения в этом посте: jQuery Event Keypress: Какая клавиша была нажата?

Shaun
источник

От api.jquery.com/click - Этот метод является ярлыком для .on («щелчок», обработчик) в первых двух вариантах и .trigger («щелчок») в третьем. так что будет делать то же самое.

Капсула

1

Попробуй это

<button class="click_on_enterkey" type="button" onclick="return false;">
<script>
$('.click_on_enterkey').on('keyup',function(event){
  if(event.keyCode == 13){
    $(this).click();
  }
});
<script>

Вишну Прасад
источник

1

Вы можете использовать этот код

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
       alert('You pressed a ENTER key.');
    }
});

Сандип Кумар
источник

1

Просто включите функцию protectDefault () в код,

$("#txtSearchProdAssign").keydown(function (e) 
{
   if (e.keyCode == 13) 
   {
       e.preventDefault();
       $('input[name = butAssignProd]').click();
   }
});

Arron
источник

0

Jquery: событие нажатия кнопки Fire Button Использование кнопки ввода Нажмите попробуйте это ::

tabindex = "0" onkeypress = "return EnterEvent (event)"

 <!--Enter Event Script-->
    <script type="text/javascript">
        function EnterEvent(e) {
            if (e.keyCode == 13) {
                __doPostBack('<%=btnSave.UniqueID%>', "");
            }
        }
    </script>
    <!--Enter Event Script-->

JIYAUL MUSTAPHA
источник

0

     $('#Search').keyup(function(e)
        {
            if (event.keyCode === 13) {
            e.preventDefault();
            var searchtext = $('#Search').val();
            window.location.href = "searchData.php?Search=" + searchtext + '&bit=1';
            }
        });

Развернуть фрагмент

Supriya
источник

-4

Похоже, это поведение по умолчанию, поэтому достаточно сделать:

$("#press-enter").on("click", function(){alert("You `clicked' or 'Entered' me!")})

Ты можешь попробовать это в этом JSFiddle

Протестировано на: Chrome 56.0 и Firefox (Dev Edition) 54.0a2, оба с jQuery 2.2.x и 3.x

xDaizu
источник

2

Это, кажется, не ловит 'возвращение' пресса вообще.

Клокоп

@klokop Вы не правы, это ловит «возврат» или «ввод». Я только что попробовал сам с jQuery 3 на FF 63, Chrome 69, Safari 10.0.1 и Opera 55, и по их ссылке, и на отдельном сайте, который я создал, чтобы протестировать это сам. Это +1 от меня.

гиперум

если вы используете кнопку, ввод приведет к срабатыванию кнопок и тегов <a>, но для диапазона, скажем, или, поскольку OP имеет обычное поле ввода, это не так.

Nickfmc

Jquery: как вызвать событие нажатия при нажатии клавиши ввода

Ответы: