답변:
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
자, 다음 텍스트 상자가 양식에 있다고 가정하십시오.
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />Enter 키를 눌렀을 때이 텍스트 상자에서 "사용자 정의"스크립트를 실행하고 양식을 제출하지 않으려면 샘플 코드가 있습니다. 이 기능은 오류 검사를 수행하지 않으며 대부분 IE에서만 작동합니다. 이를 위해서는보다 강력한 솔루션이 필요하지만 일반적인 아이디어를 얻을 수 있습니다.
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
함수 값을 반환하면 이벤트 처리기가 이벤트를 더 이상 버블 링하지 않도록 경고하고 키 누르기 이벤트가 더 이상 처리되지 않도록합니다.
그것은 지적 밖으로이었다 keyCode되고 지금은 추천하지 않습니다 . 다음으로 가장 좋은 대안 which은 더 이상 사용되지 않습니다 .
불행히도 key최신 브라우저에서 널리 지원되는 표준 은 IE와 Edge에서 약간의 동작을 합니다. IE11보다 오래된 것은 여전히 polyfill이 필요합니다 .
또한, 더 이상 사용되지 않는 경고는 keyCode및 which에 대해 매우 불길하지만 ,이를 제거하면 수많은 레거시 웹 사이트가 크게 변경 될 수 있습니다. 이런 이유로 그들은 언제 어디서나 갈 것 같지 않습니다.
eval버튼을 눌렀을 때 의 내용은 개발자 도구를 열어서 만든 내용 과 다르지 않습니다. 이것이 DB에 저장되어 다른 사용자 가 열 수있는 것이면 큰 문제이지만이 작은 조각과는 완전히 독립적 인 문제입니다.
event.which와 모두 사용 event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
which다른 브라우저를 지원 합니다 keyCode. 둘 다 포함하는 것이 좋습니다.
keydown대신 이벤트 keyup또는keypress
jQuery를 사용하는 경우 :
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
preventDefaultChrome에서 적어도 양식 제출을 중단하지는 않습니다.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'keydown'다른 의견자가 말한대로 맞습니다. 변경되지 않았으므로 답변을 업데이트합니다. 나는이 답변을 사용하고 돌아와서 의견을 볼 때까지 잠시 붙어있었습니다.
가장 최근의 클리너 :을 사용하십시오 event.key. 더 이상 임의의 숫자 코드가 없습니다!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
keyCode더 이상 사용되지 않습니다. 이것은 코드에서 마술 정수보다 더 읽기 쉽고 유지 관리가 가능합니다
전체 문서에서 Enter 키를 눌렀습니다.
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
onsubmit함수의 호출이되도록 양식 의 조치를 대체하고 그 뒤에 return false를 추가하십시오.
<form onsubmit="javascript:myfunc();return false;" >순수하게 자바 스크립트를 사용하여하고 싶다면 완벽하게 작동하는 예제입니다.
이것이 html 파일이라고 가정 해 봅시다
<!DOCTYPE html>
<html>
<body style="width: 500px">
<input type="text" id="textSearch"/>
<script type="text/javascript" src="public/js/popup.js"></script>
</body>
</html>당신의 popup.js의 파일 만이 기능을 사용
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I'm happy ");
}
});아래 코드는 ENTER전체 페이지 에 키에 대한 리스너를 추가 합니다.
이것은 로그인, 등록, 제출 등과 같은 단일 동작 버튼이있는 화면에서 매우 유용 할 수 있습니다.
<head>
<!--Import jQuery IMPORTANT -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Listen to Enter key event-->
<script type="text/javascript">
$(document).keypress(function (e) {
if (e.which == 13 || event.keyCode == 13) {
alert('enter key is pressed');
}
});
</script>
</head>모든 브라우저에서 테스트되었습니다.
jQuery 솔루션.
텍스트 입력에서 blur 이벤트가 시작될 때까지 양식 제출을 지연시킬 수있는 방법을 찾기 위해 여기에 왔습니다.
$(selector).keyup(function(e){
/*
* Delay the enter key form submit till after the hidden
* input is updated.
*/
// No need to do anything if it's not the enter key
// Also only e.which is needed as this is the jQuery event object.
if (e.which !== 13) {
return;
}
// Prevent form submit
e.preventDefault();
// Trigger the blur event.
this.blur();
// Submit the form.
$(e.target).closest('form').submit();
});양식 제출이 아닌 지연된 모든 이벤트를 발생시키는 더 일반적인 버전을 얻는 것이 좋을 것입니다.
TypeScript를 사용하고 함수에서 다중 호출을 피하십시오.
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}document.onload = (() => {
alert('ok');
let keyListener = document.querySelector('#searchUser');
//
keyListener.addEventListener('keypress', (e) => {
if(e.keyCode === 13){
let username = e.target.value;
console.log(`username = ${username}`);
fetch(`https://api.github.com/users/${username}`,{
data: {
client_id: 'xxx',
client_secret: 'xxx'
}
})
.then((user)=>{
console.log(`user = ${user}`);
});
fetch(`https://api.github.com/users/${username}/repos`,{
data: {
client_id: 'xxx',
client_secret: 'xxx'
}
})
.then((repos)=>{
console.log(`repos = ${repos}`);
for (let i = 0; i < repos.length; i++) {
console.log(`repos ${i} = ${repos[i]}`);
}
});
}else{
console.log(`e.keyCode = ${e.keyCode}`);
}
});
})();<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text"><div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
<input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
</form>
</div>
<script type="text/javascript">
$("#search_value").on('keydown', function(e) {
if (e.which == 13) {
$("#search").trigger('click');
return false;
}
});
$("#search").on('click',function(){
alert('You press enter');
});
</script>일부 구형 브라우저는 비표준 방식으로 키 다운 이벤트를 구현했습니다.
KeyBoardEvent.key 는 최신 브라우저에서 구현되는 방식입니다.
which
그리고 keyCode현재 사용되지 않습니다,하지만 그럼에도 불구하고 이렇게 코드가 여전히 IE와 같은 오래된 브라우저를 사용하는 사용자를 위해 작동하는 이러한 이벤트를 확인하기 위해 다치게하지 않습니다.
이 isKeyPressed기능은 누른 키가 입력되었는지 확인 event.preventDefault()하여 양식 제출을 방해합니다.
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}JS
function isKeyPressed(event, expectedKey, expectedCode) {
const code = event.which || event.keyCode;
if (expectedKey === event.key || code === expectedCode) {
return true;
}
return false;
}
document.getElementById('myInput').addEventListener('keydown', function(event) {
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}
});HTML
<form>
<input id="myInput">
</form>