JavaScript(JQuery)
$('input').keyup(function(e)
{
var code = e.keyCode ? e.keyCode : e.which;
switch(code)
{
case 38:
break;
case 40:
break;
case 13:
break;
default:
return;
}
});
[〜#〜] html [〜#〜]
<form method="post" action="/">
<input type="text" name="text" />
<button type="submit">Submit</button>
</form>
2つの問題があります。
1)p矢印キーを押してもキャレットは移動しないはずです。
たとえば、Chromeでアップキーを押すと、キャレットが左に移動します。ただし、この問題はChromeでのみ発生します。FFでは正常に動作します。
2)enterキーを押したときに、フォームを送信したくありません。
ところで、私はこれをkeypressではなくkeyupで動作させたいと思っています。
任意のアイデアをいただければ幸いです。ありがとう。
keyup
イベントで preventDefault()
(ブラウザがキーのデフォルトアクションを実行するのを停止するために使用する必要があるもの)とは思わない-発生afterデフォルトのイベントはすでに発生しています。詳細は このページ を参照してください。
可能であれば、代わりにkeydown
の使用を検討してください。
フォームの送信を停止することに関しては、送信ボタンによって送信がトリガーされなかった場合に submit
event およびreturn false;
にバインドできます( jQuery:を取得する方法を参照)フォームの送信時にボタンがクリックされましたか? これを確認する方法について)。
一方、フォームのkeypress
にバインドして、 Enter が押された場合、同じ方法で送信をキャンセルします(テストされていないコード):
$('form').keypress(function(e){
if(e.which === 13){
return false;
}
});
ブレークの代わりにfalseを返すか、関数を呼び出して http://api.jquery.com/event.preventDefault/ を使用することができます
例:case 40: function(e) {e.preventDefault;}
また、$('form').submit(function() {return false});
は送信を完全に停止しますが、あなたが何を求めているのかわかりませんか?
ユーザーがEnterキーを押したときにフォームが送信されないようにするには、フォームの送信関数をバインドし、イベントトリガーがEnterボタンが押された場合にfalseを返す必要があります。
上/下ボタンを押すには、e.preventDefault();
を使用します
Keyup()を使用しているときに「ENTER」のデフォルトを実際に停止できるようです。 ... jQuery apiはそれ自体をここに書き込みます http://api.jquery.com/keyup/
ここにあなたがしなければならない方法があります:
$('textarea').keyup(function(e) {
// your code here
}).keydown(function(e){
// your e.which for ENTER.
});
最も信頼できる方法は、e.preventDefault()
、e.stopPropagation()
およびreturn false
の組み合わせです。
これは次のようになります。
var override_keys = [13, 38, 40];
$('input').keyup(function(e){
var code = e.keyCode ? e.keyCode : e.which;
if ($.inArray(code, override_keys)) {
e.preventDefault();
e.stopPropagation();
return false;
}
});
また、フォームがEnterキーで送信されないようにするには、フォームのsubmit
イベントを確認する必要があります。
$('#form').submit(function(e){
var code = e.keyCode ? e.keyCode : e.which;
if ($.inArray(code, override_keys)) {
return false;
}
});