Чи є в Jquery подія, яка запускається, лише якщо користувач натискає кнопку введення в текстовому полі? Або будь-який плагін, який можна додати, щоб включити це? Якщо ні, то як би я написати швидкий плагін, який би це зробив?
Чи є в 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та передаючи селектор $ як другий аргумент 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
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подією, щоб натиснути кнопку введення.