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


106

だから私がこれまでに持っているコードは:

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

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

編集: 私はこのコードを見つけましたが、機能していないようです。

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

3
バインドしkeypressて確認しますe.charCode==13(入力ボタン)。
ブラッドクリスティー

上記のコードを使用する前に、jqueryライブラリ参照を追加しましたか?
Milind Anantwar 2012年

はい、ライブラリを参照しましたが、なぜ機能しなかったのかはわかりませんが、今は問題ありません。おかげで
ベン

はい、@ BradChristieが述べたように、keypressまたはこの回答でkeydown述べられているように、進むべき道です。
metakermit

回答:


117
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});

5
クリックイベントの後に「return false」を追加することも、ページの他のボタンでのデフォルトのEnterキーを回避するのに役立ちます
deebs

純粋なhtml なので、dmitry_romanovの答えの方が優れています。
マッケイ

6
@McKay、違います。ボタンはフォーム以外にも使用できます。実際、OPの質問は明確な形ではありません。
Dan

2
@deebsは正解です。その日に何をしたかはわかりませんが、私は頭がおならしているに違いありません。
TimはMastersAllenで2016年


76

それは……2020です。そして、これはまだ当てはまると思います。


使ってはいけません keypress

  1. keypressイベントがされて起動されないユーザーが押したときに任意の文字を生成しないキーなどを、TabCaps LockDeleteBackspaceEscape、左右Shift、ファンクションキー(F1- F12)。

    keypressイベントMozilla Developer Network

    keypressキーは時にイベントが発生し押し下げられると、そのキーは通常、文字値を生成しますinput代わりに使用してください。

  2. 非推奨になりました。

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

    • 注意 | この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;`.
});

どうif (event.key == "Enter") { document.querySelector("#linkadd").click(); } ですか: ?
Anupam

2
.keyすべてのブラウザでサポートされているわけではないことに注意してください:caniuse.com/#feat=keyboardevent-key –約10%の人が、それをサポートしていないブラウザを使用しています。
Martin Tournoij

72

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でテストされています(formactionhtml5機能ですが、そうでtypeはありません)。


17
OPがフォームを使用していない場合にのみ機能します
Andrew

@Andrewはい、見逃しました。はっきり見えるようになりましたありがとうございます
dmitry_romanov 2015

4
@Andrew、真、それは何もしないの形...でそれをラップするために、ほとんどの場合は簡単です
スティーブン・チョン

2
さらに、このソリューションは、デフォルトアクションが送信であるiOS仮想キーボードの[Go]ボタンで機能します。
エレメンタル

10
  1. 交換するbuttonとしsubmit
  2. してプログレッシブ、必ずサーバー側のバージョンがあることを確認してください
  3. JavaScriptをボタンのハンドラーではsubmitなく、フォームのハンドラーにバインドしますclick

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


6

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

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

2

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


1

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

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

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

1

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

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

1

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

<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();
});

フィドルを見てください

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

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

0

w3schools.comのhowtoを見つけました。彼らのトライミーページは次のとおりです。

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>

-1
<input type="text" id="input_id" />    

$('#input_id').keydown(function (event) {
    if (event.keyCode == 13) { 
         // Call your function here or add code here
    }
});

-2

剣道ボタンを使っています。これでうまくいきました。

<div class="form-group" id="indexform">
    <div class="col-md-8">
            <div class="row">
                <b>Search By Customer Name/ Customer Number:</b>
                @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
                @(Html.Kendo().Button()
                    .Name("btnSearch")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Content("Search")
                    .Events(ev => ev.Click("onClick")))
            </div>
    </div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
          status = $(".status");
$("#indexform").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btnSearch").click();
    }
});
</script>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.