Есть ли какое-либо событие в Jquery, которое запускается, только если пользователь нажимает кнопку ввода в текстовом поле? Или любой плагин, который можно добавить, чтобы включить это? Если нет, то как бы я написал быстрый плагин, который бы сделал это?
Ответы:
Вы можете подключить свое собственное событие
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCodeключи для некоторых, лучше использовать e.which, это гарантирует, что вы будете обрабатывать одну и ту же кнопку в каждом браузере
$('#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");
}
});Вот плагин для вас: (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')})$переменной для плагина не является хорошей идеей, поскольку это может вызвать конфликты.
$("#myInput").bind('click, onEnter', myCallback);и он работал бы, не требуя ничего другого?
вот плагин 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");
});
});func.apply(this)эту функцию внутри функции обратного вызова, которую вы можете использовать thisкак обычно, чтобы получить доступ к элементу, для которого было инициировано событие.
e.preventDefault(); e.stopPropagation();внутрь if (e.keyCode)немного.
Следует отметить, что использование 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>Если вы searchвводите, вы также можете использовать on 'search'событие. пример
<input type="search" placeholder="Search" id="searchTextBox">,
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});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;
}Ваша форма не имеет кнопки отправки по умолчанию
Еще один тонкий вариант. Я пошел на небольшое разделение полномочий, поэтому у меня есть плагин, позволяющий ловить клавишу ввода, а затем я просто привязываюсь к событиям:
(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 */ });Я не смог запустить keypressсобытие для кнопки ввода и почесал голову некоторое время, пока не прочитал документы jQuery:
« Событие нажатия клавиши отправляется элементу, когда браузер регистрирует ввод с клавиатуры. Это похоже на событие нажатия клавиши, за исключением того, что клавиши-модификаторы и непечатаемые клавиши, такие как Shift, Esc, и удаляют события нажатия клавиши запуска, но не события нажатия клавиши. » ( https://api.jquery.com/keypress/ )
Мне пришлось использовать событие keyupили, keydownчтобы поймать нажатие кнопки ввода.