6

ボタンをクリックして入力要素にフォーカスを当てると、datalist html5 要素のすべてのオプションをユーザーに自動的に表示しようとしています。通常、ユーザーが関連するテキスト入力要素を 2 回クリックすると、すべてのオプションが表示されます。ユーザーが入力を開始する前にすべてのオプションを表示できるように、この動作をプログラムでシミュレートしたいと思います。

$('#text-input').focus();を使用してフォーカスを取得し（これは機能します）、jqueryを使用して.click()（1回と2回）、.dblclick()さらに.trigger('click')はjquery.simulate.jsを使用して、クリックとダブルクリックをシミュレートしようとしました。これらはすべて をトリガーし$('#text-input').click(function() {...});ますが、ブラウザーに表示されている入力要素の状態には実際には影響しません。

ここに私のHTMLがあります:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <div id="main">
         <form>
             <datalist id="categories">
                 <option value="travel">
                 <option value ="work">
                 <option value="literature">
                 <option value="teaching">
             </datalist>
             <input type="text" list="categories" id="text-input">
             <button type="button" id="mic-button">
             </button>
         </form>
     </div>
</body>
</html>

そして、dblclick試行を使用した私のコード:

(function($) {

$(document).ready(function() {
    var textInput = $('#text-input');

    textInput.dblclick(function() {
        alert('Handler for .dblclick() called.');
    });

    $('#mic-button').click(function() {
        textInput.focus();
        // list all the options by tricking the datalist
        // to think the user double clicked on it
        textInput.dblclick();
    });
})(jQuery);
4

1 に答える 1