javascript - 막기 - 자바스크립트 엔터키 이벤트




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

하나의 텍스트 입력과 하나의 버튼이 있습니다 (아래 참조). 텍스트 상자 안에서 Enter 키를 누르면 JavaScript를 사용 하여 버튼의 클릭 이벤트트리거하는 방법은 무엇입니까?

현재 페이지에는 다른 제출 버튼이 이미 있으므로 버튼을 제출 버튼으로 만 만들 수는 없습니다. 그리고,이 특정 텍스트 상자 안에서만 Enter 키를 누르면이 특정 단추를 누르기 만하면됩니다.

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

keypressevent.key === "Enter" 사용 event.key === "Enter" 현대 JS로 event.key === "Enter" !

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

Mozilla 문서 도구

지원되는 브라우저


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

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

jQuery에서는 event.which==13 사용할 수 있습니다. form 이있는 경우 $('#formid').submit() 사용할 수 있습니다 $('#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>


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.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

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


그럼 그냥 코드 해!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

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

버튼을 submit 요소로 만들면 자동으로 실행됩니다.

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

이 작업을하기 위해서는 입력 필드를 포함하는 <form> 요소가 필요합니다 (Sergey Ilinsky에게 감사).

표준 동작을 다시 정의하는 것은 좋지 않습니다. Enter 키는 항상 양식의 제출 단추를 호출해야합니다.


비록 폼에 하나의 필드와 하나의 제출 버튼 만 있다면, 페이지에 다른 폼이 있더라도 엔터를 치면 폼을 제출해야합니다.

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


아무도 한동안 사용 가능한 html attibute "accesskey"를 발견하지 못했습니다.

이것은 키보드 단축키 물건에 자바 스크립트 방법입니다.

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

이런 식으로 사용되도록 의도했다. html 속성 자체만으로도 브라우저 및 OS에 따라 자리 표시 자 또는 기타 표시기를 변경할 수 있습니다. 스크립트는 아이디어를 제공하기 위해 테스트되지 않은 스크래치 방식입니다. 작은 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", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>


onchange 시도는 거의 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();" />

이것은 또한 도움이 될 수 있습니다. 작은 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)" />

나는이 문제가 해결되었다는 것을 알고 있지만, 나는 다른 사람들에게 도움이 될만한 것을 발견했다.


이것은 밖에있는 모든 YUI 애호가를위한 해결책입니다 :

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

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


평범한 자바 스크립트에서,

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에서도 무언가를 줄 것을 생각했다.


Angular2 :

(keyup.enter)="doSomething()"

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

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


양식 제출시 @ icedwater의 문제 를 해결하는 완전히 일반적인 JavaScript 솔루션을 추가하려면 여기에 양식 이 포함 된 완벽한 솔루션 이 필요 form .

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

Fiddle : 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://.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 />";
            }
        });
    }
});

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

내 두 센트를 heres. Windows 8 용 앱에서 작업하고 Enter 버튼을 누르면 버튼에 클릭 이벤트가 등록되기를 원합니다. 나는 JS에서 이것을하고있다. 나는 몇 가지 제안을 시도했지만 문제가있었습니다. 이것은 잘 작동합니다.


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

이것은 다소 최근 프로젝트에서 얻은 것입니다. 그물에서 찾았습니다. 오래된 자바 스크립트에서 더 좋은 방법이 있는지 없는지 잘 모릅니다.







onkeypress