source

텍스트 상자에서 "Enter" 키를 눌렀을 때 HTML 버튼을 트리거하려면 어떻게 해야 합니까?

manysource 2023. 8. 8. 21:43

텍스트 상자에서 "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>그리고 그것은 단지 a 안에 있는 그대로입니다.<div>하지만 내가 무언가를 입력할 때textbox라고 불리는 저는 키를 ""addLinks"를 수 . 사용자가 Enter 키를 누르고 "linkadd"를 트리거할 수 있기를 바랍니다.button그러면 자바스크립트 함수를 실행할 것입니다.
어떻게 해야 하나요?
합니다.

편집: 이 코드를 찾았지만 작동하지 않는 것 같습니다.

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

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

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

하지 .keypress

  1. keypress사용자가 , , , , , , 왼쪽 & 오른쪽 , 기능 F1키( - )와 같이 문자를 생성하지 않는 키를 누를 때 이벤트가 트리거되지 않습니다.

keypress이벤트

그keypress이벤트는 키를 누를 때 발생하며, 해당 키는 일반적으로 문자 값을 생성합니다. 사용input대신.

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

keypress이벤트

  • 참고 | 이벤트는 전통적으로 실제 키가 아닌 문자 값을 감지하는 것과 관련되어 있으며 일부 구성의 일부 키에서는 사용할 수 없을 수 있습니다.
  • WARNING | 이벤트 유형은 참조 및 완전성을 위해 이 규격에 정의되어 있지만, 이 규격에서는 이 이벤트 유형을 사용하지 않습니다.컨텍스트를 편집할 때 작성자는 이벤트를 대신 구독할 수 있습니다.

하지 .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-free 솔루션이 있습니다.

트type=submit기본값으로 설정할 단추로type=button다른 단추로 이동합니다. 키를 . 키를 누르면 됩니다.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에서 테스트됨(formaction이지만 html5는type그렇지 않음).

  1. 를 합니다.buttonsubmit
  2. 점진적으로 서버 버전이 있는지 확인합니다.
  3. 를 JavaScript에 .submit양식 핸들러, 양식 핸들러가 아닙니다.click

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

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

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

트리거해야 하는 기본 버튼에 대해 입력 유형="버튼"이 입력 유형="버튼"으로 대체될 때 작동합니다.

그냥 사용하기tabindex그리고.autofocusHTML 성

(이 솔루션에는 Javascript를 사용하지 마십시오!)

최신 에버그린 브라우저와 구형 브라우저는 사용자가 ENTER/RETURN 키를 누르면 웹 페이지에 있는 첫 번째 양식 제출 단추를 자동으로 제출합니다.Javascript가 필요하지 않습니다!브라우저는 거의 20년 동안 이러한 방식으로 작동했지만 새로운 웹 개발자들은 그것에 대해 배우려고 애쓰지 않았습니다.

웹 페이지에 여러 개의 제출 단추가 있고 어떤 제출 단추를 누르는지 제어하려는 경우 JavaScript 없이도 쉽게 할 수 있습니다.설정만 하면 됩니다.tabindexENTER를 ENTER/ 웹 폼 중 ENTER/RETURN 키를 누르면 **폼 .submit 형자button 그때에 때문에.form사용자가 초점을 맞춥니다.

초점을 이초을맞사다용니합다음을면을 하세요.autofocus 필드에 은 " " " 입니다.input에 시대에form그러면 ENTER/RETURN 키를 누르면 입력을 보유한 해당 양식의 제출 버튼이 트리거됩니다.그렇지 않으면 위에서 언급한 대로 키보드에서 ENTER 또는 RETURN을 누르면 페이지에 사용할 수 있는 첫 번째 제출 단추가 자동으로 트리거됩니다.

법방tabindex와 함께autofocus

자바스크립트에 초점을 맞추는 대신에, 더 쉬운 솔루션은 단지 추가하는 것입니다.tabindex=0양식 필드에서 또는 양식 요소 내의 단추를 먼저 제출한 다음autofocus양식 및 페이지의 첫 번째 입력 컨트롤 또는 제출 단추에 표시됩니다.tabindex필드 및 단추가 포커스를 가장 먼저 받는 순서를 제어합니다.이전 브라우저와 새 브라우저에 모두 내장되어 있습니다.

Tabindex=0페이지의 색인화된 탭 순서 페이지 항목 목록에 있는 모든 입력 및 단추에 동일한 포커스를 할당합니다.이렇게 하면 새 탭 순서 양식 필드 목록의 순서가 다시 지정되고 우선순위에 명시적으로 초점이 맞춰집니다.autofocus선택한 양식 필드로 포커스를 이동합니다.왜냐하면 이제 초점이 이것에 맞춰져 있기 때문입니다.tabindex나내에그기하룹화 중 하나 formsEnter 키를 누르면 해당 그룹에서 ENTER/RETURN 키 명령에 응답하는 첫 번째 제출 버튼이 트리거됩니다.

이제 키보드에서 "ENTER"를 눌러 원하는 시점에 양식을 제출할 수 있습니다.이것은 또한 첫 번째 양식 필드가 사용자에 의해 데이터에 초점을 맞추고 준비된다는 장점이 있습니다.

추가:입력할 수 있습니다.tabindex=-1탭 인덱스 집합에 있거나 탭 포커스를 가질 수 없도록 하려면 페이지의 단추를 누릅니다.이렇게 하면 선택할 수도 없습니다.

마지막으로, 다음과 같은 기능이 없으면 입력 컨트롤이 고립되지 않습니다.formHTML 래퍼입니다.HTML이 깨졌을 뿐만 아니라 의미적으로도 틀렸습니다.HTML은 여러 HtML 양식 태그를 포함하도록 설계되었습니다.웹 페이지에 여러 개의 양식이 있을 수 있으므로,<form>태그를 사용하여 어떤 양식 단추가 어떤 양식 단추와 함께 사용되는지 제어하거나, "양식" 속성 집합을 사용자 포커스를 제어할 수 있습니다. 양식 하기 위해 것이든 .type사용하는 단추 또는 스크립트를 처리하는 방법에 대해 설명합니다.중요한 것은 목록에서 어떤 것이 먼저 포커스를 가질 것인가 하는 것입니다.

<button>으로 HTML " 요는항다같다설니기됩정본이음과상소"로 설정됩니다."submit"유형을 추가하지 않은 경우 유형을 입력합니다.제출 유형 단추는 서버에 제출하지만 JavaScript는 해당 프로세스를 쉽게 종료하고 제출을 중지할 수 있습니다.따라서 ENTER 이벤트에 대해 제출 유형만 안정적으로 응답한다는 사실을 제외하고는 문제가 되지 않습니다.사용할 수 있습니다.type=button유형의 경우, 전송되지 않는 단추일 뿐입니다.하지만 저는 계속할 것입니다.type=submit 동일한이 아닌 유형을 지정하지 않도록 .type=button일부 브라우저에서는 오류가 발생합니다.

다음은 예입니다.

<form id="buttonform2" name="buttonform2" action="#" method="get" role="form">
  <label for="username1">Username</label>
  <input type="text" id="username1" name="username" value="" size="20" maxlength="20" title="Username" tabindex="0" autofocus="autofocus" />
  <label for="password1">Password</label>
  <input type="password" id="password1" name="password" size="20" maxlength="20" value="" title="Password" tabindex="0" role="textbox" aria-label="Password" />
  <button type="submit" id="button2" name="button2" type="submit" value="submit" form="buttonform2" title="Submit" tabindex="0" role="button" aria-label="Submit">Submit</button>
</form>

HTML이 해결할 수 있는 간단한 해결책을 위해 JavaScript 사용을 중지합니다.웹 브라우저에서 사용되는 HTML 속성은 20년 이상 이 기본 기능을 가지고 있었습니다.새로운 웹 개발자들은 이것을 알아야 합니다.

우선 jquery 라이브러리 파일 jquery를 추가하고 당신의 html 헤드에 호출합니다.

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

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

이것으로 충분할 것입니다, 저는 jQuery를 사용하고 있습니다. 당신은 평범한 자바스크립트를 쓸 수 있습니다.
를 바꿉니다.sendMessage()사용자의 기능을 사용합니다.

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

몇 가지 이전 답변을 바탕으로 다음과 같은 결론을 도출했습니다.

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

순수 HTML 양식 사용:

<form class="my-form" action="javascript:myFunction();">
    <button>Submit</button>
</form>

기본적으로 브라우저는 양식을 제출하는 것으로 해석합니다. 기본적으로 "제출"을 입력하고 양식의 위치에 있는 모든 항목에 액세스합니다.action됨)formaction있음).이 경우 단순성을 위해 의사 프로토콜과 함께 Javascript 함수를 사용하지만, 일반적인 형식과 같이 Javascript 이벤트 청취자 또는 GET/POST 메서드일 수 있습니다.

w3schools.com 방법을 찾았습니다. 그들의 트라이미 페이지는 다음과 같습니다.

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

이것은 일반 브라우저에서는 작동했지만 내장된 php 브라우저를 사용하는 php 앱에서는 작동하지 않았습니다.

약간의 노력 끝에 저는 다음과 같은 순수한 자바스크립트 대안을 생각해냈습니다. 이 대안은 제 상황에 적합하고 다른 모든 상황에서 작동해야 합니다.

    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>

이것은 당신이 필요로 하는 것의 가장 중요한 부분입니다. 양식id합니다.type 다리탓으에 대한 .submit추가합니다.methodURL 변경 또는 페이지 다시 로드를 방지하는 속성입니다.

<form id='form1' method='dialog'>
    <input form="form1" type="text" />
    <button form="form1" type="submit"> </button>
</form>

이것은 jquery를 사용하지 않지만 입력 상자에 포커스가 있을 때 Enter 키를 놓으면 버튼을 클릭해야 합니다.

function consoleLog() {
  // Clicking the button itself will work as well.
  console.log("enter key pressed")
}

document.getElementById("my_textbox").addEventListener(
  "keyup",
  (e) => {
    if (e.key === "Enter") {
      document.getElementById("my_button").click()
    }
  });
<input id="my_textbox" type="text">
<button id="my_button" onclick="consoleLog()">Submit</button>

페이지의 아무 곳에서나 Enter 키로 작업을 수행하려면 다음을 대신 시도할 수 있습니다.

window.addEventListener(
  "keyup",
  (event) => {
    if (event.key === "Enter") {
      document.getElementById("my_button").click()
    }
  }
);

는 MDN 파일을 .KeyboardEvent.key를 수행

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

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

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

저는 검도 버튼을 사용하고 있습니다.이것은 저에게 효과가 있었습니다.

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

언급URL : https://stackoverflow.com/questions/12955222/how-do-i-trigger-an-html-button-when-the-enter-key-is-pressed-in-a-textbox

'source' 카테고리의 다른 글

두 숫자 사이에 UI 레이블 텍스트를 애니메이션화하시겠습니까?  (0) 2023.08.08
Excel VBA에서 사용자 정의 워크시트 함수 생성  (0) 2023.08.08
Angular2 라우터 오류: 'HomePage'를 로드할 기본 콘센트를 찾을 수 없습니다.  (0) 2023.08.08
javascript를 사용하여 숫자만 반환하는 Regex  (0) 2023.08.08
WHERE 조건에 비해 JOIN 절을 사용하는 이유는 무엇입니까?  (0) 2023.08.08

'source'의 다른글

  • 현재글텍스트 상자에서 "Enter" 키를 눌렀을 때 HTML 버튼을 트리거하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바