1377

1 つのテキスト入力と 1 つのボタンがあります (以下を参照)。テキスト ボックス内でキーが押されたときに、 JavaScript を使用してボタンのクリック イベントをトリガーするにはどうすればよいですか?Enter

現在のページには既に別の送信ボタンがあるため、単にボタンを送信ボタンにすることはできません。そして、この特定のボタンがこの 1 つのテキスト ボックス内から押された場合にのみ、この特定のボタンをクリックするキーが必要です。Enter

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
4

29 に答える 29

1489

jQueryでは、以下が機能します。

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});


$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

または、プレーンJavaScriptでは、次のように機能します。

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});


document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

于 2008-09-30T21:52:16.970 に答える
422

次に、それをコーディングするだけです！

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>
于 2008-09-30T21:56:01.623 に答える
182

これを理解しました：

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>
于 2008-09-30T21:52:28.653 に答える
85

ボタンを送信要素にして、自動化します。

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

これを機能させるには、入力フィールドを含む要素が必要になることに注意してください<form>(Sergey Ilinsky に感謝します)。

標準の動作を再定義することはお勧めできません。Enterキーは常にフォームの送信ボタンを呼び出す必要があります。

于 2008-09-30T21:33:27.653 に答える
77

まだ誰も使っていないのでaddEventListener、これが私のバージョンです。要素を考えると：

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

私は以下を使用します：

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

これにより、HTML をきれいに保ちながら、イベント タイプとアクションを個別に変更できます。

<form>これらの要素を囲んで Enter キーを押すと、フォームが送信され、ページがリロードされるため、これが a の外にあることを確認することはおそらく価値があることに注意してください。発見するのに数回瞬きしました。

補遺: @ruffin のコメントのおかげで、欠落していたイベント ハンドラーと を追加してpreventDefault、このコードが (おそらく) フォーム内でも機能するようにしました。(これをテストすることに取り掛かります。その時点で、括弧で囲まれたコンテンツを削除します。)

于 2013-11-19T05:37:45.667 に答える
60

プレーンJavaScriptでは、

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

返信はjQueryでのみ行われることに気付いたので、プレーンJavaScriptでも何かを提供することを考えました。

于 2011-02-08T04:49:52.833 に答える
23

これに使用できる基本的なトリックが 1 つありますが、これについては十分に言及されていません。ajax アクションを実行したい場合、または Enter で他の作業を行いたいが、実際にフォームを送信したくない場合は、次のようにすることができます。

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

設定 action="javascript:void(0);" このように、デフォルトの動作を本質的に防止するためのショートカットです。この場合、Enter キーを押すかボタンをクリックするとメソッドが呼び出され、データをロードするために ajax 呼び出しが行われます。

于 2013-09-12T19:27:56.980 に答える
16

それを試してみてください：

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>
于 2015-03-02T08:04:35.977 に答える
15

Enter キーが押されるたびに検索をトリガーするには、次のようにします。

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}
于 2011-10-27T03:35:04.000 に答える
14 
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

これは私がやや最近のプロジェクトから持っているものです...私はそれをネット上で見つけました、そして私はもっと良い方法があるかどうかわかりません。

于 2008-09-30T21:56:26.240 に答える
13

ただし、フォームにフィールドが1つと送信ボタンが1つしかない限り、ページに別のフォームがある場合でも、Enterキーを押すとフォームが送信されます。

次に、jsを使用してonsubmitフォームをキャプチャし、必要な検証またはコールバックを実行できます。

于 2008-10-01T09:51:32.090 に答える
13

これは、そこにいるすべてのYUI愛好家のためのソリューションです。

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

この特別なケースでは、ボタン機能が挿入された DOM オブジェクトをトリガーするために YUI を使用すると、より良い結果が得られましたが、これは別の話です...

于 2013-08-29T14:01:38.417 に答える
12

Angular2で:

(keyup.enter)="doSomething()"

ボタンに視覚的なフィードバックが必要ない場合は、ボタンを参照せずにコントローラーを直接呼び出すことをお勧めします。

また、id は必要ありません。ビューとモデルを分離する別の NG2 の方法です。

于 2015-08-22T11:56:32.053 に答える
10

この場合に備えて、Posting to server から Enter ボタンを無効にし、Js スクリプトを実行することもできます。

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
于 2015-04-02T09:37:26.893 に答える
9

このonchange の試みは近いですが、ブラウザーに関しては (Safari 4.0.5 および Firefox 3.6.3 で) 誤動作するため、最終的にはお勧めしません。

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
于 2010-05-08T19:48:51.707 に答える
8

jQuery mobileの場合、次のことを行う必要がありました。

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
于 2012-05-16T20:44:52.330 に答える
8 
event.returnValue = false

イベントを処理するとき、またはイベント ハンドラーが呼び出す関数で使用します。

少なくとも Internet Explorer と Opera では動作します。

于 2010-04-22T13:53:26.433 に答える
8

フォーム送信に関する @icedwater の問題に対処する完全にプレーンな JavaScript ソリューションを追加するには、 を使用した完全なソリューションを次にform示します。

注:これは、IE9+ を含む「最新のブラウザー」用です。IE8 バージョンはそれほど複雑ではなく、ここで学ぶことができます。

フィドル: https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

JavaScript

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});
于 2015-12-23T18:51:22.987 に答える
5

jQuery でそれを行うには:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

通常の JavaScript で行うには:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});
于 2015-06-12T18:05:35.077 に答える
5 
document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

これが私の 2 セントです。私は Windows 8 用のアプリに取り組んでおり、Enter ボタンを押したときにボタンにクリック イベントを登録させたいと考えています。私はJSでこれをやっています。いくつかの提案を試みましたが、問題がありました。これはうまくいきます。

于 2014-05-19T12:40:51.240 に答える
-4

これも、問題なく動作する小さな JavaScript 関数である可能性があります。

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

この質問が解決されたことは知っていますが、他の人に役立つ何かを見つけました。

于 2011-09-13T10:45:41.460 に答える