[revision 2012、インラインハンドラなし、textarea入力処理を保持]
function checkEnter(e){
e = e || event;
var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
これで、フォームにキー押下ハンドラーを定義できます。<form [...] onkeypress = "return checkEnter（event）">
document.querySelector('form').onkeypress = checkEnter;
入力の送信を停止するために使用できるjQueryハンドラーを示します。また、Backspaceキー-> backも停止します。 「keyStop」オブジェクト内の（keyCode：selectorString）ペアは、デフォルトアクションを起動するべきではないノードと一致させるために使用されます。
ウェブはアクセス可能な場所であるべきであり、これはキーボードユーザーの期待を壊していることを忘れないでください。とはいえ、私の場合、私が作業しているWebアプリケーションはいずれにしても戻るボタンが気に入らないので、キーショートカットを無効にしても問題ありません。 「入力->送信」の議論は重要ですが、実際に尋ねられた質問とは関係ありません。
アクセシビリティについて考え、実際にこれを行う理由を考えるためのコードは次のとおりです。
$(function(){
var keyStop = {
8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
13: "input:text, input:password", // stop enter = submit
end: null
};
$(document).bind("keydown", function(event){
var selector = keyStop[event.which];
if(selector !== undefined && $(event.target).is(selector)) {
event.preventDefault(); //stop event
}
return true;
});
});
Onsubmitハンドラからfalseを返すだけです
<form onsubmit="return false;">
または、真ん中にハンドラーが必要な場合
<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>
<form onsubmit="return submitHandler()">
//Turn off submit on "Enter" key
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnSearch").attr('value');
//add more buttons here
return false;
}
});
フォームのデフォルトの送信動作をキャンセルするだけのこの関数を呼び出す必要があります。任意の入力フィールドまたはイベントに添付できます。
function doNothing() {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if( keyCode == 13 ) {
if(!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
Enterキーは、フォームのデフォルトの送信ボタンをアクティブにするだけです。これは最初のボタンです。
<input type="submit" />
ブラウザはフォーム内で検索します。
したがって、送信ボタンはありませんが、
<input type="button" value="Submit" onclick="submitform()" />
EDIT：コメントでの議論への応答：
テキストフィールドが1つしかない場合、これは機能しませんが、その場合に望ましい動作になる可能性があります。
もう1つの問題は、これがフォームを送信するためにJavascriptに依存していることです。これは、アクセシビリティの観点から問題になる可能性があります。これは、JavaScriptで<input type='button'/>を記述し、<input type='submit' />を<noscript>タグ内に配置することで解決できます。このアプローチの欠点は、javascriptが無効なブラウザの場合、ENTERでフォームを送信できることです。この場合、望ましい動作を決定するのはOPの責任です。
JavaScriptを呼び出さずにこれを行う方法はまったくありません。
純粋なJavascriptの簡単な答えは次のとおりです。
<script type="text/javascript">
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
e.preventDefault();
return false;
}
}
}, true);
</script>
これは、入力type = 'text'の「Enter」キー押下アクションのみを無効にします。訪問者は、Webサイト全体で「Enter」キーを使用できます。
他のアクションに対しても「Enter」を無効にする場合は、console.log（e）を追加できます。テストのために、クロムでF12を押し、「コンソール」タブに移動してページの「バックスペース」を押し、その中を見てどの値が返されるかを確認し、それらのすべてのパラメータをターゲットにしてコードをさらに強化することができます上記の "e.target.nodeName"、 "e.target.type"などなど...
ここで、または他の投稿でこの主題について私が見つけたすべての答えには1つの欠点があり、それはフォーム要素の実際の変更トリガーも妨げます。したがって、これらのソリューションを実行すると、onchangeイベントもトリガーされません。この問題を克服するために、これらのコードを修正し、自分で次のコードを開発しました。これが他の人にも役立つことを願っています。フォーム「prevent_auto_submit」にクラスを指定し、次のJavaScriptを追加しました。
$(document).ready(function()
{
$('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event)
{
if (event.keyCode == 13)
{
event.preventDefault();
$(this).trigger("change");
}
});
});
過去に上記のようなキー押下ハンドラーで常にそれを行ってきましたが、今日ではよりシンプルなソリューションを見つけました。 Enterキーはフォーム上の無効化されていない最初の送信ボタンをトリガーするだけなので、実際に必要なのは送信しようとするボタンをインターセプトすることだけです。
<form>
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
<!-- rest of your form markup -->
</form>
それでおしまい。キー入力は、通常どおりブラウザー/フィールド/などによって処理されます。入力/送信ロジックがトリガーされると、ブラウザーは非表示の送信ボタンを見つけてトリガーします。そして、javascriptハンドラーは送信を防ぎます。
IE8,9,10、Opera 9 +、Firefox 23、Safari（PC）、Safari（MAC）用のこのクロスブラウザーを作成するのに少し時間を費やしました
JSFiddleの例：http://jsfiddle.net/greatbigmassive/ZyeHe/
基本コード-フォームに接続された「onkeypress」を介してこの関数を呼び出し、それに「window.event」を渡します。
function stopEnterSubmitting(e) {
if (e.keyCode == 13) {
var src = e.srcElement || e.target;
if (src.tagName.toLowerCase() != "textarea") {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
}
}
stopSubmitOnEnter (e) {
var eve = e || window.event;
var keycode = eve.keyCode || eve.which || eve.charCode;
if (keycode == 13) {
eve.cancelBubble = true;
eve.returnValue = false;
if (eve.stopPropagation) {
eve.stopPropagation();
eve.preventDefault();
}
return false;
}
}
次に、フォームで：
<form id="foo" onkeypress="stopSubmitOnEnter(e);">
ただし、邪魔なJavaScriptを使用しなかった方が良いでしょう。
私の場合、このjQuery JavaScriptは問題を解決しました
jQuery(function() {
jQuery("form.myform").submit(function(event) {
event.preventDefault();
return false;
});
}
を押したときにフォームが送信されないようにするには enter textareaまたはinputフィールドで、送信イベントを確認して、イベントを送信したエレメントのタイプを見つけます。
例1
HTML
<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.type!=="submit") {
e.preventDefault();
}
});
より良い解決策は、送信ボタンがなく、通常のボタンでイベントを起動する場合です。最初の例では2つの送信イベントが発生しますが、2番目の例では1つの送信イベントのみが発生するため、より適切です。
例2
HTML
<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.localName!=="button") {
e.preventDefault();
}
});
これはもっと簡単で便利です：D
$(document).on('submit', 'form', function(e){
/* on form submit find the trigger */
if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
/* if the trigger is not between selectors list, return super false */
e.preventDefault();
return false;
}
});
フォームを送信するために「ENTER」を禁止すると、一部のユーザーに不便をかける可能性があります。そのため、以下の手順を実行することをお勧めします。
フォームタグに「onSubmit」イベントを記述します。
<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
....
....
....
</form>
次のようにJavaScript関数を記述します。
function testSubmit(){
if(jQuery("#formId").valid())
{
return true;
}
return false;
}
(OR)
理由が何であれ、Enterキーを押したときにフォームを送信しないようにするには、次の関数をjavascriptで記述できます。
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
ありがとう。
このタグをフォームに追加します-onsubmit="return false;"その後、JavaScript関数を使用してのみフォームを送信できます。
この記事を確認してください Webフォームを送信するためにENTERキーを押さないようにする方法
$(“.pc_prevent_submit”).ready(function() {
$(window).keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
<input type=”text” name=”username”>
<input type=”password” name=”userpassword”>
<input type=”submit” value=”submit”>
</form>どうですか：
<asp:Button ID="button" UseSubmitBehavior="false"/>
このリンクは、Chrome、FF、およびIE9で機能するソリューションに加えて、IE9の開発者ツール（F12）に付属するIE7および8のエミュレーターを提供します。
どうですか：
<script>
function isok(e) {
var name = e.explicitOriginalTarget.name;
if (name == "button") {
return true
}
return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>
そして、ボタンに正しい名前を付けるだけで、それでも送信されますが、テキストフィールド（つまり、returnを押したときのexplicitOriginalTarget）には正しい名前がありません。
私は、異なる「名前」値を持つ複数の送信ボタンを持っているので、自分でこれを見つけました。そのため、送信されると、同じphpファイルで異なることを行います。 enter/returnボタンは、これらの値が送信されないため、これを破ります。だから私は考えていました、enter/returnボタンはフォームの最初の送信ボタンをアクティブにしますか？そのようにすると、非表示の「Vanilla」送信ボタン、またはフォームを含むページに実行中のphpファイルを返す「name」値を持つことができます。または、キーを押してアクティブにするデフォルトの（隠された） 'name'値、および送信ボタンが独自の 'name'値で上書きします。ちょっとした考え。
もう1つの方法は、送信することになっているときにのみ送信入力ボタンをフォームに追加し、フォームの入力中に単純なdivに置き換えることです。
この属性をFORMタグに追加するだけです：
onsubmit="return gbCanSubmit;"
次に、SCRIPTタグに以下を追加します。
var gbCanSubmit = false;
次に、ボタンを作成するとき、または他の理由（関数など）で最終的に送信を許可し、グローバルブール値を反転して、次の例のように.submit（）呼び出しを実行します。
function submitClick(){
// error handler code goes here and return false if bad data
// okay, proceed...
gbCanSubmit = true;
$('#myform').submit(); // jQuery example
}
JavaScriptでフォームのキーダウンをトラップし、バブリングを防ぐことができると思います。 WebページでEnterキーを押すと、基本的に、現在選択されているコントロールが配置されているフォームが送信されます。
これは私のために働いた。
onkeydown = "return！（event.keyCode == 13）"
<form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">
</form>