[html] 텍스트 상자에서 Enter를 누를 때 HTML 버튼을 트리거하는 방법은 무엇입니까?

Program / 글쓴이

그래서 지금까지 가지고있는 코드는 다음과 같습니다.

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

답변

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

답변

그것은 …… 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;`.
});

답변

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그렇지 않음).

답변

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

필드에서 Enter를 누르면 양식 제출이 트리거되고 제출 핸들러가 실행됩니다.

답변

다음과 같이 입력에 이벤트 핸들러를 추가 할 수 있습니다.

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

답변

트리거해야하는 기본 버튼에 대해 input type = “button”이 input type = “submit”으로 바뀌면 작동합니다.

답변

우선 jquery 라이브러리 파일 jquery를 추가 하고 html 헤드에서 호출하십시오.

그런 다음 jquery 기반 코드 사용 …

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