Câu hỏi Kích hoạt một nút bấm với JavaScript trên phím Enter trong một hộp văn bản


Tôi có một đầu vào văn bản và một nút (xem bên dưới). Làm thế nào tôi có thể sử dụng JavaScript để kích hoạt sự kiện nhấp của nút khi mà Đi vào phím được nhấn 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ể chỉ cần thực hiện nút gửi một nút. Và tôi chỉ có muốn Đi vào để bấm vào nút cụ thể này nếu nó được nhấn từ bên trong 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();" />

1099
2017-09-30 21:32


gốc


nếu có hai văn bản đầu vào và không phải là một văn bản. Mà một trong những nó sẽ ràng buộc?
Lưu ý quan trọng đối với những tân binh như tôi: Phần quan trọng của câu hỏi này là nếu bạn đã có một biểu mẫu trên trang nên đã có nút gửi. Câu trả lời jQuery là tương thích trình duyệt chéo và một giải pháp tốt. - Joshua Dance
@JoshuaDance, đã có một mẫu / gửi không phải là một rắc rối. Một trang có thể có nhiều biểu mẫu (nhưng không có lồng nhau), mỗi trang có thể gửi riêng. Mọi trường của mỗi biểu mẫu sẽ chỉ kích hoạt việc gửi biểu mẫu đó. Như đã nói bởi câu trả lời này. - Frédéric
Có thể trùng lặp Sự kiện nhấn phím hoặc phím tắt cho Linux OS / iOS / debian của Android (khi nhấp vào phím Enter) - Pooja Kedar


Các câu trả lời:


Trong jQuery, sau đây sẽ làm việc:

$("#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, các thao tác sau 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>


1286
2017-09-30 21:52



Nó có lẽ là một thực hành tốt hơn để truy vấn event.which hơn event.keyCode hoặc event.charCode, xem developer.mozilla.org/en/DOM/event.charCode#Notes - William Niu
keydown không phải keyup là sự kiện tốt hơn để sử dụng. Ngoài ra, nếu bạn đang sử dụng asp.net, bạn sẽ phải return false vào cuối để ngăn chặn asp.net từ vẫn ngăn chặn sự kiện này. - maxp
Sự cố khi sử dụng keydown đó là giữ xuống nhập sẽ cháy các sự kiện hơn và hơn nữa. nếu bạn gắn vào keyup sự kiện, nó sẽ chỉ kích hoạt khi khóa được giải phóng. - Steve Paulo
Tôi đã chỉnh sửa mã của bạn thêm event.preventDefault(); trước khi gọi click(); trong khi trang của tôi có biểu mẫu và tôi đã chuyển sang keyup với keypress vì nó là người xử lý làm việc duy nhất cho tôi, dù sao, cảm ơn cho đoạn mã gọn gàng! - Adrian K.
@ Hugo Bạn không thể sử dụng $(this) vì ID mẹ là của hộp văn bản và ID bạn muốn click() bật là ID nút. - boxspah


Sau đó, chỉ cần mã nó trong!

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

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

359
2017-09-30 21:56



Vâng, tôi gần như đã làm điều đó. Tôi đoán nó chỉ là một sở thích cá nhân ... Tôi thích cách tiếp cận kiểu mô-đun hơn. ;) - kdenney
nếu bạn cần dừng việc gửi biểu mẫu: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). click (); event.returnValue = false; event.cancel = true;}" - GabrielC
Điều này làm việc cho tôi do thực tế rằng các phương pháp nội tuyến, thay vì gọi chức năng với mã tương tự trong nó, cho phép bạn trở về sai trên cuộc gọi và tránh postback. Trong trường hợp của tôi, phương thức "click" gọi một cuộc gọi async __doPostback và không có "return false;" sẽ tải lại trang. - Dave
Inline-javascript dẫn đến đau. nỗi đau dẫn đến đau khổ ... - Sam
@Sam Không bao giờ nhận được của bạn trí tuệ từ con rối. Đau dẫn đến nỗi sợvà sợ hãi là kẻ giết người. Sợ hãi là cái chết nhỏ mang đến sự hủy diệt hoàn toàn. Tôi sẽ phải đối mặt với nỗi sợ hãi của tôi. Tôi sẽ cho phép nó vượt qua tôi và thông qua tôi. Và khi nó đã qua đi, tôi sẽ biến con mắt bên trong để thấy con đường của nó. Trường hợp sự sợ hãi đã biến mất sẽ không có gì. Ngoại trừ các trình xử lý sự kiện nội tuyến. Vì vậy, vâng, hãy tách các trình xử lý sự kiện của bạn khỏi chế độ xem / đánh dấu của bạn, như câu trả lời này không. ; ^) - ruffin


Đã tìm 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>

165
2017-09-30 21:52



e = e || window.event; // cách ngắn nhất để nhận sự kiện - Victor
Tùy chọn JavaScript đơn giản nhất. Thêm JavaScript như là một thuộc tính trong HTML là không gian tiêu thụ, và jQuery chỉ là jQuery (khả năng tương thích không được đảm bảo). Cảm ơn các giải pháp! - boxspah
và nếu bạn trả về false bên trong if, bạn có thể tránh khóa được xử lý thêm: <input type = "text" id = "txtSearch" onkeypress = "searchKeyPress (event);" /> <input type = "button" id = "btnSearch" Giá trị = "Tìm kiếm" onclick = "doSomething ();" /> <script> function searchKeyPress (e) {// tìm window.event trong trường hợp sự kiện không được truyền vào e = e || window.event; if (e.keyCode == 13) {document.getElementById ('btnSearch'). nhấp (); return false; } trả về true; } </ script> - Jose Gómez


Làm cho nút thành phần 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 <form> phần tử chứa các trường nhập để tạo công việc này (nhờ Sergey Ilinsky).

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


75
2017-09-30 21:33



Dudes! Đọc toàn bộ câu hỏi của anh ấy. Đã có một nút gửi khác trên trang, do đó, điều này sẽ không hiệu quả đối với anh ấy. - skybondsor
Thực tế thú vị, gần đây tôi đã cố gắng làm điều này trong SharePoint. Tuy nhiên SharePoint đã có một biểu mẫu bao quanh tất cả nội dung của bạn và bất kỳ <form> các thẻ được đưa ra bởi trình phân tích cú pháp HTML tự do khác. Vì vậy, tôi phải cướp các phím bấm hoặc phá sản. (BTW, nhấn Enter trong SharePoint khởi chạy chế độ Chỉnh sửa vì một lý do nào đó. Tôi đoán ruy-băng đang sử dụng cùng một biểu mẫu.)
A <button type="submit" onclick="return doSomething(this)">Value</button> hoạt động. Đầu mối nằm trong return từ khóa - Gus


Vì không ai sử dụng addEventListener Tuy nhiên, đây là phiên bản của tôi. Với 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 vẫn giữ HTML sạch.

chú thích rằng nó có thể đáng giá để đảm bảo điều này nằm ngoài <form> bởi vì khi tôi đính kèm các yếu tố này, nhấn Enter đã gửi biểu mẫu và tải lại trang. Đã cho tôi một và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 bên 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ẽ loại bỏ các nội dung phù hợp.)


67
2017-11-19 05:37



Tôi thực sự không hiểu lý do tại sao câu trả lời JQeuery có nhiều upvotes hơn. Tôi khóc vì cộng đồng phát triển web. - David
Tất cả những gì bạn thực sự thiếu là một đối số trong trình xử lý nhấn phím của bạn và e.preventDefault() để làm cho nó hoạt động với các biểu mẫu. Xem câu trả lời của tôi (mới). - ruffin
trừ khi bạn không có ý định người dùng thực sự nhập bất kỳ dữ liệu nào, bạn nên thực sự làm một việc như if (event.keyCode == 13) { event.preventDefault(); go.click();} - unsynchronized
Sử dụng jQuery chỉ cho điều nhỏ bé này chắc chắn là vô ích. Nó cũng hoạt động dễ dàng với CSP và mất ít thời gian hơn để tải. Nếu bạn có thể, hãy sử dụng cái này. - Avamander


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 được đưa ra trong jQuery chỉ, vì vậy tôi nghĩ đến việc đưa ra một cái gì đó trong JavaScript đơn giản là tốt.


55
2018-02-08 04:49



document.layers? Bạn vẫn ủng hộ Netscape? !! - Victor
yea phải hỗ trợ netscape ... - Varun
Không, bạn không cần phải hỗ trợ Netscape. blog.netscape.com/2007/12/28/… - kingdango
netscape.com thậm chí không tồn tại nữa (nó chuyển hướng đến aol.com) và vẫn có những người hỗ trợ nescape, tuyệt vời. - LeartS
evt.which ? evt.which : evt.keyCode bằng evt.which || evt.keyCode - user


Một mẹo cơ bản mà bạn có thể sử dụng cho điều này mà tôi chưa thấy được đề cập đầy đủ. Nếu bạn muốn thực hiện hành động ajax hoặc một số công việc khác trên Enter nhưng không muốn thực sự gửi biểu mẫu, bạn có thể thực hiện việc 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 là bạn nhấn enter hay nhấn nút và một cuộc gọi ajax được thực hiện để tải một số dữ liệu.


19
2017-09-12 19:27



Đây là giải pháp tốt hơn cho hỗ trợ thiết bị di động. Nó tự động ẩn bàn phím trên thiết bị Android và iOS nếu bạn thêm searchCriteria.blur(); đến onsubmit. - Aaron Gillion
Điều này sẽ không hoạt động, vì đã có một nút gửi khác trong trang. - Jose Gómez
@ JoseGómez, một trang có thể có nhiều nút gửi như mong muốn của dev, được kích hoạt bởi các trường tương ứng của chúng. Chỉ cần có các biểu mẫu riêng biệt cho mỗi nhóm trường / gửi. Một trang không giới hạn ở một biểu mẫu duy nhất. - Frédéric
@Frederic: từ câu hỏi tôi (sai?) Hiểu rằng nút gửi khác có cùng dạng: "Đã 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ể chỉ cần thực hiện nút gửi một nút". - Jose Gómez
Đây là một câu trả lời tuyệt vời vì nó cho phép các hành động tùy chỉnh tránh được sự cần thiết của một loạt mã ghi đè ưa thích. - Beejor


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>

13
2018-03-02 08:04





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

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

12
2017-10-27 03:35





onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

Đây chỉ là một cái gì đó 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 có ý tưởng nếu có một cách tốt hơn hay không trong JavaScript cũ đơn giản.


11
2017-09-30 21:56





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 phải 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 với các js và thực hiện bất kỳ việc xác thực hoặc gọi lại nào bạn muốn.


9
2017-10-01 09:51