텍스트 상자에서 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(입력 버튼).
Brad Christie

위의 코드를 사용하기 전에 jquery 라이브러리 참조를 추가 했습니까?
Milind Anantwar

예, 라이브러리를 참조했지만 왜 작동하지 않는지 확실하지 않지만 지금은 괜찮습니다. 감사합니다
Ben

@BradChristie가 언급 한 바와 같이 예, keypress또는 keydown언급 이 답변이 갈 수있는 방법입니다.
metakermit

답변:


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

5
클릭 이벤트 후에 'return false'를 추가하는 것도 도움이됩니다. 페이지의 다른 버튼에 대한 기본 입력 누름을 피하기 위해
deebs

dmitry_romanov의 대답 은 순수한 html이기 때문에 더 좋습니다.
McKay

6
@McKay, 아니에요. 버튼은 양식 이외에도 사용할 수 있습니다. 사실 OP의 질문은 명시 적으로 형식이 아닙니다.
Dan

2
@deebs 꽤 맞아요, 내가 그날 무엇을했는지 확실하지 않지만 뇌가 방귀를 앓고 있어야합니다.
MastersAllen의 Tim


77

그것은 …… 2020 년입니다. 그리고 저는 이것이 여전히 사실이라고 믿습니다.


사용하지 마세요 keypress

  1. keypress이벤트가되는 트리거하지 유저가 눌렀을 때에 어떤 문자를 생성하지 않는 키 등을, Tab, Caps Lock, Delete, Backspace, Escape, 왼쪽 및 오른쪽 Shift, 기능 키 ( F1- F12).

    keypress이벤트 Mozilla 개발자 네트워크

    keypress키가 때 이벤트가 해고 아래로 누르면 , 그 키는 보통 문자 값을 생성합니다 . input대신 사용하십시오 .

  2. 더 이상 사용되지 않습니다.

    keypress이벤트 UI 이벤트 (2018 년 11 월 8 일에 게시 된 W3C 작업 초안)

    • 참고 | 이 keypress이벤트는 전통적 으로 물리적 키가 아닌 문자 값감지하는 것과 관련이 있으며 일부 구성의 모든 키에서 사용하지 못할 수 있습니다.
    • 경고 | keypress이벤트 유형 참조 완전성 본 명세서에 정의되어 있지만, 이 규격은 deprecates 이벤트 형의 사용. 편집 컨텍스트에서 작성자는 beforeinput대신 이벤트를 구독 할 수 있습니다 .

사용하지 마세요 KeyboardEvent.keyCode

  1. 더 이상 사용되지 않습니다.

    KeyboardEvent.keyCode Mozilla 개발자 네트워크

    사용되지 않음 | 이 기능은 더 이상 권장되지 않습니다. 일부 브라우저는 여전히이를 지원할 수 있지만 관련 웹 표준에서 이미 제거되었거나 삭제 중이거나 호환성 목적으로 만 유지 될 수 있습니다. 사용을 피하고 가능하면 기존 코드를 업데이트하십시오. 참조 호환성 표를 당신의 결정을 안내하는이 페이지의 하단에. 이 기능은 언제든지 작동하지 않을 수 있습니다.


그러면 무엇을 사용해야합니까? (좋은 습관)

// 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 19

2
참고 .key모든 브라우저에서 지원되지 않습니다 caniuse.com/#feat=keyboardevent-key을 - 사람들의 10 %에 대해이를 지원하지 않는 브라우저를 사용합니다.
Martin Tournoij

72

js가없는 솔루션이 있습니다.

기본으로 설정할 type=submit버튼과 type=button다른 버튼 으로 설정 합니다. 이제 아래 양식에서 모든 입력 필드에서 Enter 키를 Render누르면 버튼이 작동합니다 (양식의 두 번째 버튼 임에도 불구하고).

예:

    <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

4
앤드류는, 사실,하지만 ... 아무것도 실시하지 않는 형태로 포장하는 대부분의 경우 사소한
스티븐 정

2
또한이 솔루션은 기본 작업이 제출 인 iOS 가상 키보드 [이동] 버튼에서 작동합니다.
Elemental

10
  1. 바꾸기 buttonA를을submit
  2. 진보적 있는지 확인 당신은 서버 측 버전이
  3. 버튼 submitclick핸들러가 아닌 양식 의 핸들러에 JavaScript를 바인딩하십시오.

필드에서 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

이것은 그것을해야합니다, 나는 당신이 일반 자바 스크립트를 작성할 수있는 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 하우투를 찾았고, 그들의 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>

-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.