web-dev-qa-db-ja.com

テキストボックスでEnterキーを押したときにHTMLボタンをトリガーする方法

だから私がこれまでに持っているコードは次のとおりです。

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

<form>にはなく、<div>内にあるのと同じです。ただし、「addLinks」と呼ばれるtextboxに何かを入力すると、ユーザーがEnterキーを押して「linkadd」buttonをトリガーできるようになり、JavaScript関数が実行されます。
これどうやってするの？
ありがとう

編集：このコードは見つかりましたが、機能していないようです。

$("#addLinks").keyup(function(event){
    if(event.keyCode == 13){
        $("#linkadd").click();
    }
});
htmlbuttoninputtextbox
91
Ben
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});
104
Man Programmer

Jsフリーのソリューションがあります。

type=submitをデフォルトにしたいボタンに設定し、type=buttonを他のボタンに設定します。これで、次のフォームで任意の入力フィールドでEnterキーを押すことができ、Renderボタンが機能します（フォームの2番目のボタンであるにもかかわらず）。

例：

    <button id='close_renderer_button' class='btn btn-success'
            title='Перейти к редактированию программы'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            title='Построить фрактал'
            type=submit
            formaction='javascript:alert("Bingo!");'>
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

FF24およびChrome 35でテスト済み（formactionはhtml5機能ですが、typeはそうではありません）。

58
dmitry_romanov

2019年です。

keypressは使用しないでください

  1. keypressイベントはトリガーされないユーザーが文字を生成しないキーを押したとき Tab、 Caps Lock、 Delete、 Backspace、 Escape、 左右 Shift、 ファンクションキー（F1 - F12）。

    keypressイベント Mozilla Developer Network

    keypressイベントは、キー押されているで、通常そのキー文字値を生成するのときに起動されます。代わりにinputを使用してください。

  2. 廃止されました。

    keypressイベント Iイベント（2018年11月8日に公開されたW3Cワーキングドラフト）

    • NOTE | keypress イベントは伝統的に物理キーではなく 文字値 を検出するに関連付けられており、一部の構成ではすべてのキーで利用できない場合があります。
    • 警告 | keypress この仕様では、参照と完全性のためにイベントタイプが定義されていますが、この仕様 非推奨 このイベントタイプの使用編集コンテキストの場合、作成者は beforeinput イベントを代わりにサブスクライブできます。

KeyboardEvent.keyCodeを使用しないでください

  1. 廃止されました。

    KeyboardEvent.keyCode Mozilla Developer Network

    非推奨 |この機能は推奨されなくなりました。一部のブラウザはまだサポートしているかもしれませんが、関連するWeb標準から既に削除されているか、ドロップされているか、互換性のためにのみ保持されている可能性があります。使用を避け、可能であれば既存のコードを更新してください。このページの下部にある 互換性テーブル を参照して、決定を行ってください。この機能はいつでも機能しなくなる可能性があることに注意してください。

それから何を使うべきですか？ （良い習慣）

// Make sure this code gets executed after the DOM is loaded.
document.querySelector("#addLinks").addEventListener("keyup", event => {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});
50
Константин Ван
  1. buttonをsubmitに置き換えます
  2. プログレッシブ で、サーバー側のバージョンがあることを確認してください
  3. JavaScriptを、ボタンのsubmitハンドラーではなく、フォームのclickハンドラーにバインドします

フィールドでEnterキーを押すと、フォームの送信がトリガーされ、送信ハンドラーが起動します。

10
Quentin

次のように入力にイベントハンドラーを追加できます。

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}
7
Asad Saeeduddin

これでうまくいくはずです。私はjQueryを使用していて、プレーンなJavaScriptを記述できます。
sendMessage()を機能に置き換えます。

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});
2
Anshu

以前のいくつかの回答に基づいて、私はこれを思いつきました：

<form>
  <button id='but' type='submit'>do not click me</button>
  <input type='text' placeholder='press enter'>
</form>

$('#but').click(function(e) {
  alert('button press');
  e.preventDefault();
});

Fiddle を見てください

編集：追加のHTML要素を追加したくない場合は、JSでのみこれを行うことができます：

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });
2
Pablo Werlang

まず、jqueryライブラリファイル jquery を追加し、それをHTMLヘッドで呼び出します。

そして、jqueryベースのコードを使用...

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

トリガーする必要のあるデフォルトボタンのinput type = "button"がinput type = "submit"に置き換えられた場合に機能します。

2
Sud

W3schools.comのハウツーを見つけました。彼らのtry meページは以下にあります。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_trigger_button_enter

これは私の通常のブラウザーでは機能しましたが、組み込みのphpブラウザーを使用するphpアプリでは機能しませんでした。

少しいじった後、自分の状況で機能し、他のすべての状況で機能する次の純粋なJavaScriptの代替案を思い付きました。

    function checkForEnterKey(){
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("myBtn").click();
        }
    }

    function buttonClickEvent()
    {
        alert('The button has been clicked!');
    }

HTMLテキストボックス内でEnterキーを押して、ボタンを有効にします。

    <br />
    <input id="myInput" onkeyup="checkForEnterKey(this.value)">
    <br />
    <button id="myBtn" onclick="buttonClickEvent()">Button</button>
0
Scott Tovey