ユーザーがテキストボックスのEnterボタンを押した場合にのみトリガーされるJqueryのイベントはありますか？またはこれを含めるために追加できるプラグインはありますか？そうでない場合、どうすればこれを行うクイックプラグインを作成できますか？
ユーザーがテキストボックスのEnterボタンを押した場合にのみトリガーされる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");
}
});
ここにあなたのためのプラグインがあります：（フィドル：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し、2番目の引数として$ selectorをに渡すことによりon()、再バインドまたは二重バインドイベントを処理する必要なく、DOMに対して要素をアタッチ、デタッチ、追加、または削除できます。これは、イベントが直接でdocument.bodyはなくアタッチされているためです。$selectorつまり$selector、追加、削除、および追加ができ、バインドされたイベントをロードすることはありません。off()beforeを呼び出すことにより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>
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;
}
フォームにデフォルトの送信ボタンがありません
別の微妙なバリエーション。私は少し力の分離に行ったので、Enterキーをキャッチできるようにするプラグインがあります。それから、通常どおりイベントにバインドします。
(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 */ });keypressjQueryのドキュメントを読むまで、Enterボタンのイベントを発生させることができず、しばらく頭をかきました。
" keypressイベントは、ブラウザがキーボード入力を登録するときに要素に送信されます。これは、修飾キーとShift、Escなどの非印刷キー、および削除トリガーkeydownイベントではなくkeypressイベントではないことを除いて、keydownイベントと同様です。 "（https://api.jquery.com/keypress/）
Enterボタンの押下をキャッチするには、keyupまたはkeydownイベントを使用する必要がありました。