2017-12-26 39 views
-3

ここでのアイデアは、「TEST」をクリックしたときにテキスト入力を自動的に入力して検索を行うという考えです。だから、 "TEST"というテキストをクリックしてEnterキーを押すことをシミュレートしたい。 jQueryを使用する方法はありますか?ここでjQuery - 検索ボックスにフォーカスして、入力キーをシミュレートするボタン

<div class="item" onclick="myFunc1()"><p onclick="myFunc2()">TEST</p></div> 
    <script> 
      function myFunc1() { 
      document.getElementById("Search").value = "html templates"; 
      } 
      function myFunc2() { 
      document.getElementById("Search").focus(); 
      } 
    </script> 
    <input type="text" name="search" id="Search"> 
</div> 
+0

多分これはhttps://stackoverflow.com/questions/961532/firing-a-keyboard-event-in-javascript – klugjo

+0

質問に役立つだろう:なぜ私は、任意のキーイベントが表示されていないがあなたのコードで? – Rajesh

答えて

0

は、あなたの質問やコードに基づいて小さなデモです:

$("#testClickHere").on('click', function() { 
 
    $("#Search").val($(this).text()).focus().trigger('keypress'); 
 
}); 
 

 
$("#Search").on('input keypress', function() { 
 
    console.log($(this).val() + " is search string. Search code here..."); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item"> 
 
    <p id='testClickHere'>TEST</p> 
 
</div> 
 

 
<input type="text" name="search" id="Search">

0

あなたが投稿したコードが悪いの間隔による読みにくいです。また、なぜdivの中にスクリプトタグがありますか?

IMOでは、TESTをクリックするための段落要素よりもボタン要素を使用する方がよいでしょう。また、myFunc1()は、クリックするのが難しい視覚的なスタイリングを持たないdivに割り当てられます。

テキストを入力に割り当てるためにmyFunc2()を追加しましたか?その目的についてもっと説明できますか?

以下のコードは、あなたが要求したものとまったく同じものではありませんが、その内容に基づいて、あなたが望むものを達成できると思います。それが役に立てば幸い。

var input = document.getElementById("my_input"); 
 

 
var button = document.getElementById("my_button"); 
 

 
input.onclick = fillInput; 
 

 
button.onclick = doSearch; 
 

 
function fillInput(){ 
 
\t input.value = "html templates"; 
 
} 
 

 
function doSearch(){ 
 
\t //search code here 
 
    console.log("Searching..."); 
 
}
<input id="my_input" type="text" placeholder="click here"> 
 

 
<button id="my_button">TEST</button>