Нажатие на ссылку при нажатии клавиши ввода, используя jQuery

Question

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

код

//jQuery 
$(document).ready(function() {

  //if focus is in the input box drivingSchoolInput
  $("#drivingSchoolInput").live("click", function() {

    //if enter key is pressed
    if(e.keyCode == 13) {

        //click the button and go to next page
        $("#button1").click();
    }       
  });   
});

Разметка

<form>      
  <div class="formDiv">
    <label for="City">Search by Driving School</label>
    <span class="inputBox"><input type="text" name="City" class="input" id="drivingSchoolInput" /></span>
  </div>

  <h4 class="submitButton"><a href="school.html" id="button1">Submit</a></h4>     
</form>

Answer 1

Напишите небольшой плагин jQuery:

jQuery.fn.enter = function(callback) {
   if(!callback) {
      //don't attach if we have garbage.
      return;
   }

   $(this).keydown(function(e) {
       var ev = e || event;
       if(ev.keyCode == 13) {
          callback();
          return false;
       }
   }); 
};

Использование: $(element).enter(callback_func);

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

Answer 2

Проверьте это: JQuery Event Keypress: Какая клавиша была нажата?

Я просто объединю коды из этой записи здесь:

$('#searchbox input').bind('keypress', function(e) {
 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do your stuff + form submit
 }
});

PS: я никогда не проверял это, но оно должно работать. : Р

Answer 3

У вас есть несколько серьезных проблем с этим кодом ...

Первый, pygorex1 перехватил : вам нужно указать аргумент события, если вы хотите сослаться на него ...

Второй находится в той же области вашего кода: вы пытаетесь проверить ключевое событие в обработчике для события click!

Третий можно найти в этой строке:

            //click the button and go to next page
            $("#button1").click();

... который ничего не делает, поскольку у вас нет обработчиков событий по этой ссылке, а функция jQuery click() не запускает поведение браузера по умолчанию !

Вместо этого попробуйте что-то вроде этого:

// if a key is pressed and then released
$("#drivingSchoolInput").live("keyup", function(e) {

  // ...and it was the enter key...
  if(e.keyCode == 13) {

    // ...navigate to the associated URL.
    document.location = $("#button1").attr('href');
  }               
});

Answer 4

Я хотел сделать что-то похожее, поэтому после прочтения предложения Дэвида К Эггхеда выше я придумал это, которое вызывает «щелчок» даже на якоре при нажатии Enter. Может также использоваться для «нажатия» кнопки!

$(document).keypress(function(event){if(event.keyCode==13){$('.save_icon').trigger("click");}});

Answer 5

Я использовал следующее с asp.net LinkButton

        $('#drivingSchoolInput').keypress(function (event) {
            if (event.keyCode == 13) {
                eval($('#button1').attr('href'));
            }
        });

У меня также была ФОРМА в заголовке с разрешенным для seaching, поэтому мне нужно добавить еще один шаг, чтобы отключить публикацию ФОРМЫ.

        $('#drivingSchoolInput').keypress(function (event) {
            if (event.keyCode == 13) {
                $('#header1_ButtonTerm').attr('disabled', 'disabled'); <-- hack added to kill FORM POST
                eval($('#button1').attr('href'));
            }
        });

Answer 6

У меня был очень похожий вопрос. Однако я не смог найти полное решение.

Я просто хотел прикрепить одну и ту же функцию к 2 различным элементам, используя 2 различных метода ее выполнения. Например, что хотел Том: НАЖМИТЕ на ссылку, ИЛИ нажмите ENTER в поле ввода и выполните ту же функцию (т. Е. Перейдите на другую страницу).

Джейкоб Релкин представил хорошую идею для нажатия клавиши ввода. Я включил это в код ниже:

Итак, на основе следующей простой разметки:

<div>
  <label for="myInput">Type Stuff</label>
  <input id="myInput" type="text" value="" />
  <a id="myButton" href="http://google.com">Click me!</a>
</div>

Используйте этот код JavaScript (JQuery):

//this is the plugin Jacob Relkin suggested
(function($) {
$.fn.enter=function(callback){
    this.keyup(function(e) {
        var ev = e || event;
        if(ev.keyCode == 13) {
            callback();
            return false;
        }
    }); 
};
})(jQuery);

$(document).ready(function(){

    var fnDoStuff = function() {
        //insert code here
        //for this example I will complete Tom's task
        document.location.href = $("#myButton").attr('href');
    };

    $('#myInput').enter(fnDoStuff);
    $('#myButton').click(fnDoStuff);

 });

Таким образом, вы можете прикрепить одну и ту же функцию к любому количеству элементов с любым типом взаимодействия.

Answer 7

Эта строка нуждается в e:

$("#drivingSchoolInput").live("click", function(e) {