텍스트 상자의 Enter 키에서 JavaScript로 버튼 클릭 트리거

질문자 :kdenney

하나의 텍스트 입력과 하나의 버튼이 있습니다(아래 참조). 텍스트 상자 내부에서 Enter 키를 눌렀을 때 JavaScript를 사용 하여 버튼의 클릭 이벤트를 트리거하려면 어떻게 해야 합니까?

현재 페이지에 이미 다른 제출 버튼이 있으므로 단순히 버튼을 제출 버튼으로 만들 수 없습니다. 그리고, 나는 단지 그것을 다른 사람이 하나의 텍스트 상자, 아무것도 내에서 누를 경우이 특정 버튼을 클릭하여 키 입력합니다.

 <input type="text" id="txtSearch" /> <input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

jQuery에서는 다음이 작동합니다.

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

 $("#pw").keyup(function(event) { if (event.keyCode === 13) { $("#myButton").click(); } }); $("#myButton").click(function() { alert("Button code executed."); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Username:<input id="username" type="text"><br> Password:&nbsp;<input id="pw" type="password"><br> <button id="myButton">Submit</button>

또는 일반 JavaScript에서는 다음이 작동합니다.

 document.getElementById("id_of_textbox") .addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("id_of_button").click(); } }); 

 document.getElementById("pw") .addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("myButton").click(); } }); function buttonCode() { alert("Button code executed."); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Username:<input id="username" type="text"><br> Password:&nbsp;<input id="pw" type="password"><br> <button id="myButton" onclick="buttonCode()">Submit</button>

Steve Paulo

그런 다음 코드를 입력하십시오!

 <input type = "text" id = "txtSearch" onkeydown = "if (event.keyCode == 13) document.getElementById('btnSearch').click()" /> <input type = "button" id = "btnSearch" value = "Search" onclick = "doSomething();" />

Sergey Ilinsky

이것을 알아 냈습니다.

 <input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" /> <input type="button" id="btnSearch" Value="Search" onclick="doSomething();" /> <script> function searchKeyPress(e) { // look for window.event in case event isn't passed in e = e || window.event; if (e.keyCode == 13) { document.getElementById('btnSearch').click(); return false; } return true; } </script>

kdenney

버튼을 제출 요소로 만들어 자동으로 만듭니다.

 <input type = "submit" id = "btnSearch" value = "Search" onclick = "return doSomething();" />

이 작업을 수행하려면 입력 필드가 포함 <form> 요소가 필요합니다(Sergey Ilinsky에게 감사).

표준 동작을 재정의하는 것은 좋은 방법이 아닙니다. Enter 키는 항상 양식의 제출 버튼을 호출해야 합니다.

albertein

addEventListener 를 사용하지 않았기 때문에 여기 내 버전이 있습니다. 주어진 요소:

 <input type = "text" id = "txt" /> <input type = "button" id = "go" />

나는 다음을 사용할 것입니다 :

 var go = document.getElementById("go"); var txt = document.getElementById("txt"); txt.addEventListener("keypress", function(event) { event.preventDefault(); if (event.keyCode == 13) go.click(); });

이렇게 하면 HTML을 깨끗하게 유지하면서 이벤트 유형과 작업을 별도로 변경할 수 있습니다.

그것을 만들기 위해 아마 가치가 있다고 참고 확인이는 밖에서이다 <form> 내가 양식을 제출하고 페이지를 다시로드 Enter 키를 눌러 그들에 이러한 요소를 동봉하면 때문이다. 발견하는 데 몇 번이나 깜박했습니다.

부록 : @ruffin의 댓글 덕분에 누락된 이벤트 핸들러와 preventDefault 를 추가하여 이 코드가 양식 내에서도 (아마도) 작동할 수 있도록 했습니다. (나는 이것을 테스트하기 위해 돌아다닐 것이고, 그 시점에서 나는 괄호 안의 내용을 제거할 것이다.)

icedwater

일반 자바스크립트에서는

 if (document.layers) { document.captureEvents(Event.KEYDOWN); } document.onkeydown = function (evt) { var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode; if (keyCode == 13) { // For Enter. // Your function here. } if (keyCode == 27) { // For Escape. // Your function here. } else { return true; } };

제이쿼리로만 답장을 해준다는 걸 알았기 때문에 일반 자바스크립트로도 뭔가를 주고 싶다는 생각이 들었습니다.

Varun

내가 완전히 언급하지 않은 한 가지 기본 트릭을 사용할 수 있습니다. ajax 작업을 수행하거나 Enter에서 다른 작업을 수행하고 싶지만 실제로 양식을 제출하고 싶지 않은 경우 다음을 수행할 수 있습니다.

 <form onsubmit="Search();" action="javascript:void(0);"> <input type="text" id="searchCriteria" placeholder="Search Criteria"/> <input type="button" onclick="Search();" value="Search" id="searchBtn"/> </form>

설정 작업="javascript:void(0);" 이것은 기본적으로 기본 동작을 방지하기 위한 지름길입니다. 이 경우 Enter 키를 누르거나 버튼을 클릭했는지 여부에 관계없이 메서드가 호출되고 일부 데이터를 로드하기 위해 ajax 호출이 수행됩니다.

Switters

시도 해봐:

 <input type="text" id="txtSearch"/> <input type="button" id="btnSearch" Value="Search"/> <script> window.onload = function() { document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) { if (event.keyCode == 13) { document.getElementById('btnSearch').click(); } }; document.getElementById('btnSearch').onclick =doSomething; } </script>

mahbub_siddique

Enter 키를 누를 때마다 검색을 시작하려면 다음을 사용하십시오.

 $(document).keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { $('#btnSearch').click(); } }

me_an

최신 JS에서 keypress 및 event.key === "Enter" 를 사용하십시오!

 const textbox = document.getElementById("txtSearch"); textbox.addEventListener("keypress", function onEvent(event) { if (event.key === "Enter") { document.getElementById("btnSearch").click(); } });

모질라 문서

지원되는 브라우저

Gibolt

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

이것은 내가 다소 최근 프로젝트에서 가져온 것입니다 ... 인터넷에서 찾았습니다. 평범한 오래된 JavaScript에 더 나은 방법이 있는지 전혀 모릅니다.

Max Schmeling

비록 양식에 하나의 필드와 하나의 제출 버튼만 있는 한 페이지에 다른 양식이 있더라도 Enter 키를 누르면 양식이 제출되어야 한다고 확신합니다.

그런 다음 js로 onsubmit 양식을 캡처하고 원하는 유효성 검사 또는 콜백을 수행할 수 있습니다.

garrow

이것은 모든 YUI 애호가를 위한 솔루션입니다.

 Y.on('keydown', function() { if(event.keyCode == 13){ Y.one("#id_of_button").simulate("click"); } }, '#id_of_textbox');

이 특별한 경우에는 버튼 기능이 삽입된 DOM 개체를 트리거하기 위해 YUI를 사용하여 더 나은 결과를 얻었지만 이것은 또 다른 이야기입니다...

frhd

Angular2에서 :

 (keyup.enter)="doSomething()"

버튼에 시각적 피드백을 원하지 않는다면 버튼을 참조하지 않고 컨트롤러를 직접 호출하는 것이 좋은 디자인입니다.

또한 id는 필요하지 않습니다. 뷰와 모델을 분리하는 또 다른 NG2 방법입니다.

AlikElzin-kilaka

한동안 사용 가능한 html 속성 "accesskey"를 아무도 눈치채지 못했습니다.

이것은 바로 가기 키에 대한 자바 스크립트가 아닌 방법입니다.

MDN의 액세스 키 속성 바로 가기

이런식으로 사용하기 위함입니다. html 속성 자체로 충분하지만 브라우저 및 운영 체제에 따라 자리 표시자 또는 기타 표시기를 변경할 수 있습니다. 스크립트는 아이디어를 제공하기 위해 테스트되지 않은 스크래치 접근 방식입니다. 작은 bowser 와 같은 브라우저 라이브러리 감지기를 사용할 수 있습니다.

 let client = navigator.userAgent.toLowerCase(), isLinux = client.indexOf("linux") > -1, isWin = client.indexOf("windows") > -1, isMac = client.indexOf("apple") > -1, isFirefox = client.indexOf("firefox") > -1, isWebkit = client.indexOf("webkit") > -1, isOpera = client.indexOf("opera") > -1, input = document.getElementById('guestInput'); if(isFirefox) { input.setAttribute("placeholder", "ALT+SHIFT+Z"); } else if (isWin) { input.setAttribute("placeholder", "ALT+Z"); } else if (isMac) { input.setAttribute("placeholder", "CTRL+ALT+Z"); } else if (isOpera) { input.setAttribute("placeholder", "SHIFT+ESCAPE->Z"); } else {'Point me to operate...'}

 <input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

NVRM

이 경우 Posting to server에서 enter 버튼을 비활성화하고 Js 스크립트를 실행하려는 경우입니다.

 <input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13) {document.getElementById('btnSearch').click(); return false;}"/> <input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Stephen Ngethe

현대적이고 더 이상 사용 keyCode onkeydown ) Javascript:

 <input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

MCCCS

이 onchange 시도는 가깝지만 브라우저와 관련하여 앞으로(Safari 4.0.5 및 Firefox 3.6.3에서) 오작동하므로 궁극적으로 권장하지 않습니다.

 <input type="text" id="txtSearch" onchange="doSomething();" /> <input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Luke Nezda

event.returnValue = false

이벤트를 처리할 때 또는 이벤트 핸들러가 호출하는 함수에서 사용하십시오.

적어도 Internet Explorer와 Opera에서는 작동합니다.

ELEK

양식 제출과 관련된 @icedwater의 문제 를 해결한 완전히 평범한 JavaScript 솔루션을 추가하려면 다음과 같이 form을 사용하는 완전한 솔루션 을 제공 form .

참고: 이것은 IE9+를 포함한 "최신 브라우저"용입니다. IE8 버전은 훨씬 더 복잡하지 않으며 여기에서 배울 수 있습니다.

---

바이올린: https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

 <body> <form> <input type="text" id="txt" /> <input type="button" id="go" value="Click Me!" /> <div id="outige"></div> </form> </body>

자바스크립트

 // The document.addEventListener replicates $(document).ready() for // modern browsers (including IE9+), and is slightly more robust than `onload`. // More here: https://stackoverflow.com/a/21814964/1028230 document.addEventListener("DOMContentLoaded", function() { var go = document.getElementById("go"), txt = document.getElementById("txt"), outige = document.getElementById("outige"); // Note that jQuery handles "empty" selections "for free". // Since we're plain JavaScripting it, we need to make sure this DOM exists first. if (txt && go) { txt.addEventListener("keypress", function (e) { if (event.keyCode === 13) { go.click(); e.preventDefault(); // <<< Most important missing piece from icedwater } }); go.addEventListener("click", function () { if (outige) { outige.innerHTML += "Clicked!<br />"; } }); } });

ruffin

jQuery 모바일의 경우 다음을 수행해야 했습니다.

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

user1071182

간결함과 현대적인 js 접근 방식을 좋아하는 사람들을 위해.

 input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

여기서 입력 은 입력 요소를 포함하는 변수입니다.

Alexandr Tsyganok

document.onkeypress = function (e) { e = e || window.event; var charCode = (typeof e.which == "number") ? e.which : e.keyCode; if (charCode == 13) { // Do something here printResult(); } };

여기 내 2센트. Windows 8용 앱을 개발 중이며 Enter 버튼을 누를 때 버튼이 클릭 이벤트를 등록하도록 하고 싶습니다. 나는 이것을 JS에서 하고 있다. 몇 가지 제안을 시도했지만 문제가 있었습니다. 이것은 잘 작동합니다.

Eric Engel

jQuery로 하려면:

 $("#txtSearch").on("keyup", function (event) { if (event.keyCode==13) { $("#btnSearch").get(0).click(); } });

일반 JavaScript로 수행하려면 다음을 수행하십시오.

 document.getElementById("txtSearch").addEventListener("keyup", function (event) { if (event.keyCode==13) { document.getElementById("#btnSearch").click(); } });

clickbait

짧은 작업 순수 JS

 txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1 

 txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1 function doSomething() { console.log(''); }

 <input type="text" id="txtSearch" /> <input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Kamil Kiełczewski

event.which==13 사용할 수 있습니다. form 이 있는 경우 $('#formid').submit() 사용할 수 있습니다(해당 양식 제출에 올바른 이벤트 리스너가 추가됨).

 $('#textfield').keyup(function(event){ if(event.which==13){ $('#submit').click(); } }); $('#submit').click(function(e){ if($('#textfield').val().trim().length){ alert("Submitted!"); } else { alert("Field can not be empty!"); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="textfield"> Enter Text:</label> <input id="textfield" type="text"> <button id="submit"> Submit </button>

Unmitigated

클래스를 추가하여이 기능을 달성하기 위해 사용자 정의 자바 스크립트를 개발했습니다.

예: <button type="button" class="ctrl-p">Custom Print</button>

여기를 확인하십시오. 바이올린
-- 또는 --
실행 예제를 확인하십시오 https://stackoverflow.com/a/58010042/6631280

참고: 현재 논리에서는 Ctrl + Enter를 눌러야 합니다.

Ravi Makwana

요즘은 change 이벤트가 대세!

 document.getElementById("txtSearch").addEventListener('change', () => document.getElementById("btnSearch").click() );

Daniel De León

이것은 또한 잘 작동하는 작은 JavaScript 함수에 도움이 될 수 있습니다.

 <script type="text/javascript"> function blank(a) { if(a.value == a.defaultValue) a.value = ""; } function unblank(a) { if(a.value == "") a.value = a.defaultValue; } </script> <input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

이 질문이 해결되었다는 것을 알고 있지만 방금 다른 사람들에게 도움이 될 수 있는 것을 찾았습니다.

Niraj Chauhan

출처 : http:www.stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box