Я пытаюсь автоматически показать пользователю все параметры элемента html5 списка данных при нажатии кнопки, в результате чего элемент ввода становится в фокусе. Обычно все параметры отображаются, когда пользователь дважды щелкает соответствующий элемент ввода текста. Я хотел бы программно имитировать это поведение, чтобы пользователь мог видеть все параметры, прежде чем начать печатать.
Я пытался имитировать щелчки и двойные щелчки, получая фокус с помощью $('#text-input').focus(); (это работает), а затем используя jquery .click() (один и два раза), .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);
