Tôi có một kiểu nhập văn bản và một nút bấm (xem bên dưới). Làm cách nào tôi có thể sử dụng JavaScript để kích hoạt sự kiện nhấp chuột của nút khi Enternhấn phím bên trong hộp văn bản?

Đã có một nút gửi khác trên trang hiện tại của tôi, vì vậy tôi không thể đơn giản biến nút này thành nút gửi. Và, tôi chỉ muốn Enterphím bấm vào nút cụ thể này nếu nó được nhấn từ trong một hộp văn bản này, không có gì khác.

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

Trong jQuery, cách sau sẽ hoạt động:

$("#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>

Hoặc trong JavaScript đơn giản, những điều sau đây sẽ hoạt động:

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>

Sau đó, chỉ cần mã nó vào!

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

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

Chỉ ra điều này:

<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>

Biến nút thành một phần tử gửi, vì vậy nó sẽ tự động.

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

Lưu ý rằng bạn sẽ cần một <form>yếu tố có chứa các trường đầu vào để thực hiện công việc này (cảm ơn Serge Ilinsky).

Đó không phải là một cách thực hành tốt để xác định lại hành vi tiêu chuẩn, Enterkhóa phải luôn gọi nút gửi trên biểu mẫu.

Vì chưa có ai sử dụng addEventListener, đây là phiên bản của tôi. Cho các yếu tố:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

Tôi sẽ sử dụng như sau:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

Điều này cho phép bạn thay đổi loại sự kiện và hành động riêng biệt trong khi giữ cho HTML sạch sẽ.

Lưu ý rằng có lẽ đáng để đảm bảo rằng điều này nằm ngoài một <form>vì khi tôi đính kèm các yếu tố này vào chúng, nhấn Enter đã gửi biểu mẫu và tải lại trang. Mất một vài cái chớp mắt để khám phá.

Phụ lục : Nhờ nhận xét của @ruffin, tôi đã thêm trình xử lý sự kiện bị thiếu và preventDefaultđể cho phép mã này (có lẽ) cũng hoạt động trong một biểu mẫu. (Tôi sẽ đi xung quanh để kiểm tra điều này, tại thời điểm đó tôi sẽ xóa nội dung được đặt trong ngoặc.)

Trong JavaScript đơn giản

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

Tôi nhận thấy rằng câu trả lời chỉ được đưa ra trong jQuery, vì vậy tôi cũng nghĩ sẽ đưa ra một cái gì đó bằng JavaScript đơn giản.

Một mẹo cơ bản bạn có thể sử dụng cho việc này mà tôi chưa thấy đề cập đầy đủ. Nếu bạn muốn thực hiện một hành động ajax hoặc một số công việc khác trên Enter nhưng không thực sự muốn gửi một biểu mẫu bạn có thể làm điều này:

<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>

Đặt hành động = "javascript: void (0);" như thế này là một phím tắt để ngăn chặn hành vi mặc định về cơ bản. Trong trường hợp này, một phương thức được gọi cho dù bạn nhấn enter hay nhấp vào nút và một cuộc gọi ajax được thực hiện để tải một số dữ liệu.

Thử nó:

<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>

Để kích hoạt tìm kiếm mỗi lần nhấn phím enter, hãy sử dụng:

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

Đây chỉ là thứ tôi có từ một dự án gần đây ... Tôi đã tìm thấy nó trên mạng và tôi không biết liệu có cách nào tốt hơn hay không bằng JavaScript cũ.

Sử dụng keypressvà event.key === "Enter"với JS hiện đại!

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

Tài liệu Mozilla

Trình duyệt được hỗ trợ

Mặc dù, tôi khá chắc chắn rằng miễn là chỉ có một trường trong biểu mẫu và một nút gửi, nhấn enter sẽ gửi biểu mẫu, ngay cả khi có một biểu mẫu khác trên trang.

Sau đó, bạn có thể chụp biểu mẫu onsubmit với js và thực hiện bất kỳ xác nhận hoặc gọi lại nào bạn muốn.

Không ai nhận thấy "accesskey" html có sẵn trong một thời gian.

Đây là một cách không có javascript để các công cụ phím tắt.

Các phím tắt thuộc tính accesskey trên MDN

Có ý định được sử dụng như thế này. Bản thân thuộc tính html là đủ, chúng ta có thể thay đổi trình giữ chỗ hoặc chỉ báo khác tùy thuộc vào trình duyệt và os. Kịch bản là một cách tiếp cận đầu chưa được kiểm tra để đưa ra một ý tưởng. Bạn có thể muốn sử dụng trình phát hiện thư viện trình duyệt như bowser nhỏ

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>

Đây là một giải pháp cho tất cả những người yêu thích YUI ngoài kia:

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

Trong trường hợp đặc biệt này, tôi đã có kết quả tốt hơn khi sử dụng YUI để kích hoạt các đối tượng DOM đã được thêm chức năng nút - nhưng đây là một câu chuyện khác ...

Trong Angular2 :

(keyup.enter)="doSomething()"

Nếu bạn không muốn có một số phản hồi trực quan trong nút, thì đó là một thiết kế tốt để không tham chiếu nút mà chỉ cần gọi trực tiếp bộ điều khiển.

Ngoài ra, id không cần thiết - một cách phân tách NG2 khác giữa chế độ xem và mô hình.

Điều này trong trường hợp bạn muốn cũng có thể nhập nút enter từ Đăng lên máy chủ và thực thi tập lệnh 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();" />

Đây onchange nỗ lực gần, nhưng misbehaves đối với trình duyệt trở lại sau đó chuyển tiếp (trên Safari 4.0.5 và Firefox 3.6.3), vì vậy cuối cùng với, tôi sẽ không khuyên bạn nên nó.

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

event.returnValue = false

Sử dụng nó khi xử lý sự kiện hoặc trong chức năng mà trình xử lý sự kiện của bạn gọi.

Nó hoạt động trong Internet Explorer và Opera ít nhất.

Đối với di động jquery tôi phải làm

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

Để thêm một giải pháp JavaScript hoàn toàn đơn giản giải quyết vấn đề của @ icedwater với việc gửi biểu mẫu , đây là một giải pháp hoàn chỉnh vớiform .

LƯU Ý: Đây là dành cho "trình duyệt hiện đại", bao gồm IE9 +. Phiên bản IE8 không phức tạp hơn nhiều và có thể tìm hiểu ở đây .

Vĩ cầm: 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 />";
            }
        });
    }
});

Trong Javascript hiện đại, không được đánh giá cao (không có keyCodehoặc 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();
    }
};

Đây là hai xu của tôi. Tôi đang làm việc trên một ứng dụng cho Windows 8 và muốn nút này đăng ký một sự kiện nhấp khi tôi nhấn nút Enter. Tôi đang làm điều này trong JS. Tôi đã thử một vài gợi ý, nhưng có vấn đề. Điều này chỉ hoạt động tốt.

Để làm điều đó với jQuery:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

Để làm điều đó với JavaScript bình thường:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

Đối với những người có thể thích cách tiếp cận js ngắn gọn và hiện đại.

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

trong đó đầu vào là một biến chứa thành phần đầu vào của bạn.

Đối với JS hiện đại keyCodekhông được dùng nữa, keythay vào đó hãy sử dụng

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

Trong jQuery, bạn có thể sử dụng event.which==13. Nếu bạn có một form, bạn có thể sử dụng $('#formid').submit()(với các trình lắng nghe sự kiện chính xác được thêm vào việc gửi biểu mẫu đã nói).

$('#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>

Tôi đã phát triển javascript tùy chỉnh để đạt được tính năng này bằng cách thêm lớp

Thí dụ: <button type="button" class="ctrl-p">Custom Print</button>

Tại đây Hãy xem Fiddle
- hoặc -
xem ví dụ đang chạy https://stackoverflow.com/a/58010042/6631280

Lưu ý: trên logic hiện tại, bạn cần nhấn Ctrl+ Enter

Điều này cũng có thể giúp, một hàm JavaScript nhỏ, hoạt động tốt:

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

Tôi biết câu hỏi này đã được giải quyết, nhưng tôi chỉ tìm thấy một cái gì đó, có thể hữu ích cho những người khác.