Jquery'de yalnızca kullanıcı bir metin kutusundaki enter düğmesine basarsa tetiklenen herhangi bir olay var mı? Ya da bunu eklemek için eklenebilecek herhangi bir eklenti? Değilse, bunu yapacak hızlı bir eklentiyi nasıl yazarım?
Jquery'de yalnızca kullanıcı bir metin kutusundaki enter düğmesine basarsa tetiklenen herhangi bir olay var mı? Ya da bunu eklemek için eklenebilecek herhangi bir eklenti? Değilse, bunu yapacak hızlı bir eklentiyi nasıl yazarım?
Yanıtlar:
Kendi özel etkinliğinize bağlanabilirsiniz
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCodebazı tuşlar için farklıdır , kullanımı daha iyidir e.which, bu her tarayıcıda aynı düğmeyi ele alacağınızı garanti eder
$('#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");
}
});İşte sizin için bir eklenti: (Keman: 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')})$eklenti için değişkeni kullanmak çatışmalara neden olabileceği için iyi bir fikir değildir.
$("#myInput").bind('click, onEnter', myCallback);ve başka bir şeye ihtiyaç duymadan çalışabilir mi?
bunu yapmak için bir jquery eklentisi heres
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);kullanmak için kodu ekleyin ve şu şekilde ayarlayın:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this), geri çağırma işlevi içinde this, olayın tetiklendiği öğeye erişmek için normal olarak kullanabilirsiniz .
e.preventDefault(); e.stopPropagation();içine ekleyin if (e.keyCode).
Edilmelidir iyi not kullanımı bu live()jQuery edilmiştir kaldırılmış sürümü yana 1.7ve edilmiş kaldırıldı jQuery 1.9. Bunun yerine, kullanılması on()önerilir.
Aşağıdaki potansiyel zorlukları çözdüğü için aşağıdaki bağlama yöntemini şiddetle öneririm:
document.bodyikinci seçici olarak bağlama ve $ seçiciyi ikinci argüman olarak geçirerek on(), yeniden bağlama veya çift bağlama olaylarıyla uğraşmaya gerek kalmadan elemanlar DOM'a eklenebilir, sökülebilir, eklenebilir veya çıkartılabilir. Bunun nedeni, olayın doğrudan document.bodyyerine ekli olmasıdır $selector, yani araçlar $selectoreklenebilir, kaldırılabilir ve tekrar eklenebilir ve hiçbir zaman kendisine bağlı olayı yüklemez.off()Önceden arayarak on(), bu komut dosyası yanlışlıkla çift bağlayıcı olaylar hakkında endişelenmenize gerek kalmadan sayfanın ana gövdesi içinde veya AJAX çağrısının gövdesi içinde yaşayabilir.$(function() {...}), bu komut dosyası sayfanın ana gövdesi tarafından veya bir AJAX çağrısının gövdesi içinde yeniden yüklenebilir. $(document).ready()AJAX istekleri için işten atılmaz $(function() {...}).İşte bir örnek:
<!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>Girişiniz ise search, on 'search'olayı da kullanabilirsiniz . Misal
<input type="search" placeholder="Search" id="searchTextBox">.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});HTML Kodu:-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">Java Kod Kodu
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;
}Formunuzda Varsayılan Gönder Düğmesi yok
Başka bir ince varyasyon. Güçlerin hafif bir şekilde ayrılması için gittim, bu yüzden enter tuşunu yakalamayı etkinleştirmek için bir eklentim var, sonra normalde olaylara bağlandım:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);Ve sonra kullanımda:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });Bu varyasyon, etkinlik yetkisi kullanmanıza olanak tanır (henüz oluşturmadığınız öğelere bağlamak için).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });keypressJQuery belgelerini okuyana kadar enter düğmesine basma olayını başaramadım ve bir süre başımı çizdim:
" Tuş basma olayı, tarayıcı klavye girişini kaydettiğinde bir öğeye gönderilir. Bu, tuş basma olayına benzer, ancak ÜstKrkt, Esc ve sil tetikleyici tuş basma olaylarını silme, ancak tuş basma olaylarını değil. " ( https://api.jquery.com/keypress/ )
Enter tuşuna basmak için keyupveya keydownolayını kullanmak zorunda kaldım .