Chức năng jQuery thực hiện trên nút Bấm và Enter/Return (phím)

Tôi đang cố gắng tạo một hộp tìm kiếm nhỏ cho phép bạn tìm kiếm trên Twitter dựa trên từ khóa bạn nhập vào trường nhập. Trong khi nó hoạt động, nó chỉ hoạt động nếu bạn nhấn nút Submit. Tôi cũng muốn có thể nhấn phím Enter hoặc Return để bắt đầu tìm kiếm. Tôi đã thử sử dụng hàm .sumbit và gói đầu vào của tôi xung quanh một phần tử biểu mẫu không thành công. Bất kỳ thông tin chi tiết nào sẽ được đánh giá cao!Chức năng jQuery thực hiện trên nút Bấm và Enter/Return (phím)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 

function(data) { 

$('#startSearch').click(function(){ 

$('#tweets .results').remove(); 

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?' 

    $.getJSON(searchTerm, function(data) { 
     $.each(data.results, function() { 
      $('<div class="results"></div>') 
      .hide() 
      .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>') 
      .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>') 
      .append('<span class="userText">' + this.text + '</span>') 
      .append('<time class="textTime">' + relTime(this.created_at) + '</time>') 
      .appendTo('#tweets') 
      .fadeIn(); 

     }); 

    }); 

</script>

<body> 


<label id="searchLabel" for="twitterSearch">Search</label> 
<input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"> 
<input id="startSearch" type="submit"> 

<datalist id="searchSugg"> 
<option value="css3 mulitple backgrounds"> 
<option value="html5 video"> 
<option value="responsive web design"> 
<option value="twitter api"> 
</datalist> 

<div id="tweets"> 
</div> 
</body>

Nguồn

2012-06-01 Alvin Jones

Nếu bạn thực sự sử dụng một

tôi đã thử phương pháp này nhưng tôi đã không thành công. đầu tiên tôi bọc các phần tử HTML trong một '' và trong jQuery của tôi, tôi đã sử dụng '$ ('# myFormsID'). submit (function() {'. kết quả dường như không làm gì cả. –

EDIT: Như Spudley đề nghị "một trong những điểm chính của việc sử dụng jQuery là để ngăn chặn bạn cần phải sử dụng sự kiện gây nên nhúng trong đánh dấu HTML" do đó, một giải pháp tốt hơn sẽ là

<script> 
$(document).ready(function(){ 

function(data) { 

$('#twitterSearch').keydown(function(event){  
    if(event.keyCode==13){ 
     $('#startSearch').trigger('click'); 
    } 
}); 

$('#startSearch').click(function(){ 

$('#tweets .results').remove(); 

    var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?' 

    $.getJSON(searchTerm, function(data) { 
     $.each(data.results, function() { 
      $('<div class="results"></div>') 
      .hide() 
      .append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>') 
      .append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>') 
      .append('<span class="userText">' + this.text + '</span>') 
      .append('<time class="textTime">' + relTime(this.created_at) + '</time>') 
      .appendTo('#tweets') 
      .fadeIn(); 

     }); 

    }); 

</script>

HOẶC - Xét đề nghị trước:

<input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true" >

Nguồn

2012-06-01 22:45:10

bạn có thể làm ... nhưng một trong những điểm chính của việc sử dụng jQuery là dừng bạn phải sử dụng trình kích hoạt sự kiện được nhúng trong đánh dấu HTML. Có thể sử dụng sự kiện ['keydown()' của jQuery ] (http://api.jquery.com/keydown/) thay vào đó? – Spudley

trong khi tôi thực sự thích ý tưởng đằng sau giải pháp của Cyril, khi tôi cố gắng triển khai hàm bổ sung, nó đã phá vỡ chức năng hoàn toàn. –

Tôi lấy lại ... giải pháp hoạt động! Cảm ơn bạn rất nhiều vì đã giúp đỡ. –

Nếu bạn muốn nơi sự kiện với js không gây khó chịu thì bạn có thể sử dụng hệ thống này cũng:

$("#element").keydown(function(event) { 
if (event.keyCode == 13) { 
    // do stuff 
}

còn nếu bạn có một nút gửi, đây là một sự thay thế, #element phải là văn bản lĩnh vực nơi bạn muốn bắt sự kiện.

tài liệu tham khảo như sau: answer

Nguồn

2012-06-01 22:54:14

Hãy thử tạo nghe cho cả báo chí và chuột nhấp chuột then chốt.

function myFunction(e){ 
    if (e.which=='13' || e.type=='click'){ 
     // Run your code here 
    } 
} 
$(document) 
    .on('click', '#startSearch', myFunction) 
    .on('keypress', this, myFunction);

Trong hành động http://codepen.io/scottyzen/pen/akWPJd

Nguồn

2016-07-02 00:51:01 Scottyzen

Chức năng jQuery thực hiện trên nút Bấm và Enter/Return (phím)

Trả lời

Các vấn đề liên quan