ฉันมีformสองกล่องข้อความหนึ่งเลือกหล่นลงและเป็นหนึ่งปุ่ม เมื่อenterกดปุ่มฉันต้องการเรียกใช้ฟังก์ชัน Javascript (กำหนดโดยผู้ใช้) แต่เมื่อฉันกดมันจะส่งแบบฟอร์ม
ฉันจะป้องกันไม่ให้มีformการส่งเมื่อenterกดปุ่มได้อย่างไร
ฉันมีformสองกล่องข้อความหนึ่งเลือกหล่นลงและเป็นหนึ่งปุ่ม เมื่อenterกดปุ่มฉันต้องการเรียกใช้ฟังก์ชัน Javascript (กำหนดโดยผู้ใช้) แต่เมื่อฉันกดมันจะส่งแบบฟอร์ม
ฉันจะป้องกันไม่ให้มีformการส่งเมื่อenterกดปุ่มได้อย่างไร
คำตอบ:
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 และขอบ สิ่งใดที่เก่ากว่า IE11 ยังจะต้องมีpolyfill
นอกจากนี้ในขณะที่คำเตือนที่เลิกใช้นั้นค่อนข้างเป็นลางสังหรณ์เกี่ยวกับkeyCodeและwhichการลบสิ่งเหล่านั้นจะเป็นตัวแทนของการเปลี่ยนแปลงครั้งใหญ่ในเว็บไซต์มรดกจำนวนมาก ด้วยเหตุนี้จึงไม่น่าที่พวกเขาจะไปทุกที่ในไม่ช้า
evalเนื้อหาโดยการกดปุ่มไม่แตกต่างกันถ้าพวกเขาเปิดเครื่องมือนักพัฒนาและทำมัน หากนี่คือสิ่งที่ได้รับการบันทึกลงในฐานข้อมูลและสามารถเปิดได้โดยผู้ใช้รายอื่นก็จะเป็นเรื่องใหญ่ แต่นั่นเป็นปัญหาที่ไม่ขึ้นอยู่กับตัวอย่างเล็ก ๆ น้อย ๆ นี้อย่างสมบูรณ์
ใช้ทั้ง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();
}
});preventDefaultดูเหมือนจะไม่หยุดส่งแบบฟอร์มใน Chrome อย่างน้อย
$('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กระทำของแบบฟอร์มที่จะเรียกใช้ฟังก์ชันของคุณและเพิ่มผลตอบแทนเท็จหลังจากนั้นคือ:
<form onsubmit="javascript:myfunc();return false;" >สารละลาย js ตอบสนอง
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>ดังนั้นอาจเป็นทางออกที่ดีที่สุดในการครอบคลุมเบราว์เซอร์ให้ได้มากที่สุดและเป็นข้อพิสูจน์ในอนาคต
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")ถ้าคุณต้องการที่จะทำมันโดยใช้จาวาสคริปต์อย่างหมดจดที่นี่เป็นตัวอย่างที่ทำงานได้อย่างสมบูรณ์แบบ
สมมติว่านี่เป็นไฟล์ 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
ฉันมาที่นี่เพื่อหาวิธีชะลอการส่งแบบฟอร์มจนกระทั่งหลังจากเหตุการณ์ความพร่ามัวของข้อความถูกยิง
$(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();
});คงจะดีถ้าได้รับรุ่นทั่วไปที่ใช้เหตุการณ์ที่ล่าช้าทั้งหมดแทนที่จะส่งแบบฟอร์ม
วิธีที่ง่ายและมีประสิทธิภาพมากจากมุมมองของฉันควรจะ:
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}ใช้ TypeScript และหลีกเลี่ยงการเรียกหลายรายการในฟังก์ชัน
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}อย่าส่งแบบฟอร์มโดยกดปุ่ม "Enter":
<form id="form_cdb" onsubmit="return false">ดำเนินการฟังก์ชั่นบนปุ่มกด "Enter":
<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">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;">เพิ่มรหัสนี้ในหน้า HTML ของคุณ ... มันจะปิดการใช้งาน ... ใส่ปุ่ม ..
<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>