jQuery関数の実行ボタンのクリックとEnter/Return（キー）

入力フィールドに入力したキーワードに基づいてTwitterを検索できる小さな検索ボックスを作成しようとしています。作業中は、[送信]ボタンを押しても機能します。 EnterキーまたはReturnキーを押して検索を開始することもできます。私は.sumbit関数を使って試してみましたが、フォーム要素の周りに入力をラップして成功しませんでした。どんな洞察も大いに感謝しています！jQuery関数の実行ボタンのクリックとEnter/Return（キー）

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

出典

2012-06-01 Alvin Jones

あなたが実際に ''

私はこの方法を試しましたが、失敗しました。最初に ''でHTML要素をラップし、私のjQueryでは '$（ 'myFormsID'）を使用しました。submit（function（）{'。 –

EDIT：Spudleyは「jQueryのは、あなたがHTMLマークアップに埋め込まれたトリガイベントを使用する必要が停止することで使用する主なポイントの一つ」で示唆したようにそうよりよい解決策は次のようになり

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

OR - 前の提案：

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

出典

2012-06-01 22:45:10

jQueryを使用する主なポイントの1つは、HTMLマークアップに埋め込まれたイベントトリガーを使用しなくて済むことです。jQueryの['keydown（）'イベントを使用することがあります]（http://api.jquery.com/keydown/）代わりに？ – Spudley

私は実際にCyrilのソリューションの背後にあるアイデアが好きですが、機能を完全に壊した追加機能を実装しようとしましたが、どちらのアプローチも機能していないようでした。ここに何か？ –

私はそれを取り戻す...解決策は働く！非常に助けをありがとう。 –

あなたが目障りではないJSのある場所のイベントをしたい場合も、このシステムを使用することができ、その後：あなたが送信ボタンを使用している場合、これは選択肢であるにも

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

を、#elementはあなたがキャッチしたいテキストフィールドでなければなりません行事。これに

参照：answer

出典

2012-06-01 22:54:14

は、キーを押すとマウスクリックの両方のリスナーを作成してみてください。

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

アクションで

http://codepen.io/scottyzen/pen/akWPJd

出典

2016-07-02 00:51:01 Scottyzen

jQuery関数の実行ボタンのクリックとEnter/Return（キー）

答えて

関連する問題