Câu trả lời:
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}Ok, vì vậy hãy tưởng tượng bạn có hộp văn bản sau dưới dạng:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />Để chạy một số tập lệnh "do người dùng xác định" từ hộp văn bản này khi nhấn phím enter và không gửi biểu mẫu, đây là một số mã mẫu . Xin lưu ý rằng chức năng này không thực hiện bất kỳ kiểm tra lỗi nào và rất có thể sẽ chỉ hoạt động trong IE. Để làm điều này đúng, bạn cần một giải pháp mạnh mẽ hơn, nhưng bạn sẽ có được ý tưởng chung.
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}trả về giá trị của hàm sẽ cảnh báo cho bộ xử lý sự kiện không làm bong bóng sự kiện thêm nữa và sẽ ngăn sự kiện nhấn phím được xử lý thêm.
Nó được ra nhọn mà keyCodelà bây giờ bị phản . Giải pháp thay thế tốt nhất tiếp theo whichđã cũng bị phản đối .
Thật không may key, tiêu chuẩn ưa thích , được hỗ trợ rộng rãi bởi các trình duyệt hiện đại, có một số hành vi tinh ranh trong IE và Edge . Bất cứ điều gì cũ hơn IE11 vẫn sẽ cần một polyfill .
Hơn nữa, trong khi cảnh báo không được chấp nhận là khá đáng ngại keyCodevà which, việc loại bỏ những cảnh báo đó sẽ thể hiện một sự thay đổi lớn đối với số lượng lớn các trang web cũ. Vì lý do đó, không có khả năng họ sẽ đi bất cứ nơi nào sớm.
evalnội dung bằng cách nhấn nút không khác gì nếu họ mở các công cụ dành cho nhà phát triển và thực hiện. Nếu đây là thứ gì đó được lưu vào DB và có thể được mở bởi người dùng KHÁC , thì đó sẽ là một vấn đề lớn, nhưng đó là một vấn đề hoàn toàn độc lập với đoạn trích nhỏ này.
Sử dụng cả hai event.whichvà event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};whichnhững người khác hỗ trợ keyCode. Đó là thực hành tốt để bao gồm cả hai.
keydownsự kiện thay vì keyuphoặckeypress
Nếu bạn đang sử dụng jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});preventDefaultdường như không dừng việc gửi biểu mẫu, trong Chrome ít nhất.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'keydown'là chính xác như các bình luận khác đang nêu. Vì nó không được thay đổi nên tôi sẽ cập nhật câu trả lời. Tôi đã sử dụng câu trả lời này và bị mắc kẹt trong một thời gian cho đến khi tôi trở lại và xem các ý kiến.
Gần đây và sạch sẽ hơn nhiều: sử dụng event.key. Không còn mã số tùy ý!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});keyCodebị phản đối Điều này dễ đọc và dễ bảo trì hơn một số nguyên ma thuật trong mã của bạn
Phát hiện phím Enter được nhấn trên toàn bộ tài liệu:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});Ghi đè onsubmithành động của biểu mẫu để gọi hàm của bạn và thêm return false sau nó, nghĩa là:
<form onsubmit="javascript:myfunc();return false;" >Vì vậy, có lẽ giải pháp tốt nhất để bao quát càng nhiều trình duyệt càng tốt và là bằng chứng trong tương lai sẽ là
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")Nếu bạn muốn làm điều đó bằng cách sử dụng hoàn toàn java script thì đây là một ví dụ hoạt động hoàn hảo
Giả sử đây là tệp html của bạn
<!DOCTYPE html>
<html>
<body style="width: 500px">
<input type="text" id="textSearch"/>
<script type="text/javascript" src="public/js/popup.js"></script>
</body>
</html>trong tệp popup.js của bạn chỉ cần sử dụng chức năng này
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I'm happy ");
}
});Mã bên dưới sẽ thêm người nghe cho ENTERkhóa trên toàn bộ trang.
Điều này có thể rất hữu ích trong các màn hình với một nút Hành động duy nhất, ví dụ: Đăng nhập, Đăng ký, Gửi, v.v.
<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>Đã thử nghiệm trên tất cả các trình duyệt.
Một giải pháp jQuery.
Tôi đến đây để tìm cách trì hoãn việc gửi biểu mẫu cho đến sau khi sự kiện mờ trên đầu vào văn bản đã bị hủy.
$(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();
});Sẽ rất tuyệt nếu có được một phiên bản tổng quát hơn, kích hoạt tất cả các sự kiện bị trì hoãn thay vì chỉ gửi biểu mẫu.
Sử dụng TypeScript và tránh nhiều cuộc gọi trên hàm
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"><form id="form1" runat="server" onkeypress="return event.keyCode != 13;">Thêm mã này vào trang HTML của bạn ... nó sẽ vô hiệu hóa ... Enter Nút ..
<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>Một số trình duyệt cũ đã triển khai các sự kiện keydown theo cách không chuẩn.
KeyBoardEvent.key là cách nó được cho là sẽ được thực hiện trong các trình duyệt hiện đại.
which
và keyCodehiện không được chấp nhận, nhưng dù sao cũng không nên kiểm tra các sự kiện này để mã hoạt động cho người dùng vẫn sử dụng các trình duyệt cũ hơn như IE.
Các isKeyPressedkiểm tra chức năng nếu chìa khóa ép được nhập và event.preventDefault()gây cản trở các hình thức từ nộp.
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}Mã não
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>