Я пытаюсь сделать это, когда пользователь находится в текстовом поле, и они нажимают клавишу ввода, это то же самое, что и щелчок по ссылке, и в этом случае это должно привести их к другой странице. Вот что у меня есть, и это не работает.
//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>
Напишите небольшой плагин 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);
Надеюсь, это поможет.
Проверьте это: 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: Я никогда не тестировал его, но он должен "работать".: P
У вас есть несколько серьезных проблем с этим кодом...
Первый, 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');
}
});
Я хотел сделать что-то подобное, поэтому после прочтения предложения Дэвида К Эггхеда выше я придумал это, которое вызывает "click" даже на якоре при нажатии клавиши ввода. Также можно использовать кнопку "click" a!
$(document).keypress(function(event){if(event.keyCode==13){$('.save_icon').trigger("click");}});
Для этой строки требуется e:
$("#drivingSchoolInput").live("click", function(e) {
У меня был очень похожий вопрос. Однако я не смог найти полное решение.
Я просто хотел приложить одну и ту же функцию к двум различным элементам, используя два разных метода ее выполнения. Например, что хотел Том: НАЖМИТЕ ссылку, ИЛИ нажмите ENTER в поле ввода и выполните ту же функцию (т.е. перейдите на другую страницу).
Якоб Релкин представил хорошую идею для нажатия клавиши "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 task
document.location.href = $("#myButton").attr('href');
};
$('#myInput').enter(fnDoStuff);
$('#myButton').click(fnDoStuff);
});
Таким образом, вы можете присоединить одну и ту же функцию к любому количеству элементов с любым типом взаимодействия.
Я использовал следующее с asp.net LinkButton
$('#drivingSchoolInput').keypress(function (event) {
if (event.keyCode == 13) {
eval($('#button1').attr('href'));
}
});
У меня также был FORM в заголовке с разрешенным для использования, поэтому мне нужно добавить еще один шаг, чтобы отключить FORM от публикации.
$('#drivingSchoolInput').keypress(function (event) {
if (event.keyCode == 13) {
$('#header1_ButtonTerm').attr('disabled', 'disabled'); <-- hack added to kill FORM POST
eval($('#button1').attr('href'));
}
});