하나의 텍스트 입력과 하나의 버튼이 있습니다 (아래 참조). 텍스트 상자 안에서 키를 누를 때 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:&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>

그런 다음 코드를 작성하십시오!

<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 호출이 수행됩니다.

시도 해봐:

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

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

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

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

이것은 다소 최근의 프로젝트에서 얻은 것입니다 ... 인터넷에서 발견했으며 일반 오래된 JavaScript에 더 좋은 방법이 있는지 여부는 알 수 없습니다.

현대 JS keypress와 event.key === "Enter"함께 사용하십시오 !

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

모질라 문서

지원되는 브라우저

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

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

어느 누구도 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>

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

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

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

에서 Angular2 :

(keyup.enter)="doSomething()"

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

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

이 경우 Posting에서 서버로 입력 버튼을 사용 설정하고 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();" />

이 onchange를 시도 가깝지만 그래서 결국 다시 다음 앞으로 (사파리 4.0.5 및 Firefox 3.6.3)에 브라우저와 관련,와 무례한 행동, 나는 그것을 추천하지 않을 것입니다.

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

event.returnValue = false

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

Internet Explorer 및 Opera에서 작동합니다.

jquery mobile의 경우해야했습니다.

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

양식 제출과 관련하여 @icedwater의 문제 를 해결 한 완전히 일반적인 JavaScript 솔루션을 추가하려면 다음 과 같은 완벽한 솔루션 을 소개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 />";
            }
        });
    }
});

현대적이고 사용되지 않는 ( keyCode또는 없이 onkeydown) 자바 스크립트에서 :

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

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

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

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

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

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

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

최신 JS keyCode는 더 이상 사용되지 않으므로 key대신 사용하십시오.

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

jQuery에서는을 사용할 수 있습니다 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>

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

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

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

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

작은 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)" />

나는이 질문이 해결되었다는 것을 알고 있지만 방금 다른 사람들에게 도움이 될만한 것을 발견했습니다.