ฉันมีข้อความเดียวและปุ่มเดียว (ดูด้านล่าง) ฉันจะใช้จาวาสคริปต์เพื่อเรียกใช้เหตุการณ์การคลิกของปุ่มได้อย่างไรเมื่อ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 ฉันได้เพิ่มตัวจัดการเหตุการณ์ที่หายไปและ a preventDefaultเพื่ออนุญาตให้โค้ดนี้ (น่าจะ) ทำงานในฟอร์มได้เช่นกัน (ฉันจะไปรอบ ๆ เพื่อทดสอบสิ่งนี้ ณ จุดนี้ฉันจะลบเนื้อหาที่อยู่ในวงเล็บ)

ใน JavaScript ธรรมดา

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>

การตั้งค่าการกระทำ = "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 แบบเก่าแบบธรรมดา

การใช้งานkeypressและevent.key === "Enter"มี JS ทันสมัย!

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

เอกสาร Mozilla

เบราว์เซอร์ที่รองรับ

แม้ว่าฉันค่อนข้างแน่ใจว่าตราบใดที่มีเพียงหนึ่งฟิลด์ในฟอร์มและปุ่มส่งปุ่มหนึ่งการกด Enter ควรส่งฟอร์มแม้ว่าจะมีฟอร์มอื่นในหน้าก็ตาม

จากนั้นคุณสามารถจับภาพแบบฟอร์มส่งกับ js และทำการตรวจสอบหรือเรียกกลับที่คุณต้องการ

ไม่มีใครสังเกตเห็นว่า "accesskey" ของ HTML html attibute ซึ่งมีให้บริการมาระยะหนึ่งแล้ว

นี่เป็นวิธีที่ไม่มีวิธีจาวาสคริปต์ในการบรรจุแป้นพิมพ์ลัด

คีย์ลัดแอ็ตทริบิวต์ accesskey บน MDN

ตั้งใจที่จะใช้แบบนี้ แอตทริบิวต์ html นั้นเพียงพอแล้วเราสามารถเปลี่ยนตัวยึดตำแหน่งหรือตัวบ่งชี้อื่น ๆ ได้มากเพียงใดขึ้นอยู่กับเบราว์เซอร์และระบบปฏิบัติการ สคริปต์เป็นวิธีการลบข้อมูลที่ยังไม่ผ่านการทดสอบเพื่อให้แนวคิด คุณอาจต้องการใช้ตัวตรวจจับไลบรารี่ของเบราว์เซอร์เช่นตัวเลือกเล็ก ๆ

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');

ในกรณีพิเศษนี้ฉันได้ผลลัพธ์ที่ดีกว่าการใช้ YUI สำหรับเรียกวัตถุ DOM ที่ถูกฉีดด้วยฟังก์ชั่นปุ่ม - แต่นี่เป็นอีกเรื่อง ...

ในAngular2 :

(keyup.enter)="doSomething()"

หากคุณไม่ต้องการความคิดเห็นแบบเห็นภาพในปุ่มมันเป็นการออกแบบที่ดีที่จะไม่อ้างอิงปุ่ม แต่ให้เรียกใช้คอนโทรลเลอร์โดยตรง

นอกจากนี้ยังไม่จำเป็นต้องใช้รหัส - อีกวิธีหนึ่งในการแยก NG2 ระหว่างมุมมองและโมเดล

ในกรณีนี้คุณต้องการปิดใช้งานปุ่ม Enter จากการโพสต์ไปยังเซิร์ฟเวอร์และดำเนินการสคริปต์ 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พยายามอยู่ใกล้ แต่ misbehaves ที่เกี่ยวกับเบราว์เซอร์กลับมาแล้วไปข้างหน้า (ใน Safari และ Firefox 4.0.5 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 ฉันต้องทำ

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

เพื่อเพิ่มการแก้ปัญหา JavaScript ธรรมดาอย่างสมบูรณ์ที่จ่าหน้า@ ปัญหา icedwater ด้วยการส่งแบบฟอร์มที่นี่เป็นโซลูชั่นที่สมบูรณ์ด้วย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>

JavaScript

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

ในปัจจุบันJavascript ที่ไม่ได้รับการแก้ไข (โดยไม่มี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();
    }
});

วิธีทำด้วยจาวาสคริปต์ปกติ:

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คุณสามารถใช้ หากคุณมี a 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>

ที่นี่ตรวจสอบซอ
- หรือ -
ดูตัวอย่างการใช้งาน 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)" />

ฉันรู้ว่าคำถามนี้ได้รับการแก้ไขแล้ว แต่ฉันเพิ่งพบบางสิ่งที่จะเป็นประโยชน์กับผู้อื่น