하나의 텍스트 입력과 하나의 버튼이 있습니다 (아래 참조). 텍스트 상자 안에서 키를 누를 때 JavaScript를 사용 하여 버튼의 클릭 이벤트 를 트리거하려면Enter 어떻게해야합니까?
현재 페이지에 이미 다른 제출 버튼이 있으므로 버튼을 제출 버튼으로 만들 수는 없습니다. 그리고, 나는 단지 원하는 Enter그것은 다른 사람이 하나의 텍스트 상자, 아무것도 내에서 누르면 키가이 특정 버튼을 클릭합니다.
<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: <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: <input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>답변
그런 다음 코드를 작성하십시오!
<input type = "text"
id = "txtSearch"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "doSomething();"
/>답변
이것을 알아 냈습니다 :
<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>답변
버튼을 제출 요소로 설정하면 자동으로됩니다.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/><form>이 작업을 수행하려면 입력 필드를 포함 하는 요소가 필요합니다 (Sergey Ilinsky 덕분에).
표준 동작을 재정의하는 것은 좋은 방법 Enter이 아닙니다 . 키는 항상 양식의 제출 버튼을 호출해야합니다.
답변
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와이 코드가 양식 내에서 (아마도) 작동 할 수 있도록 a 를 추가했습니다 . (이 시점에서 브라켓 내용을 제거 할 것입니다.)
답변
일반 자바 스크립트에서
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;
}
};응답은 jQuery에서만 제공되므로 일반 JavaScript로 무언가를 제공하는 것으로 생각했습니다.
답변
내가 완전히 언급하지 않은 이것에 사용할 수있는 기본 트릭입니다. 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>action = “javascript : void (0);”설정 기본 동작을 방지하기위한 바로 가기입니다. 이 경우 Enter 키를 누르거나 버튼을 클릭하든 메소드가 호출되고 일부 데이터를로드하기 위해 ajax 호출이 수행됩니다.
