html - 将输入搜索只读设置为 false onclick

Question

单击 li 将在搜索字段中插入文本并同时将其设置为只读。单击输入框时如何将值设置为false？谢谢你的帮助。

  $('#myid li').click(function(e) {
    $('#search').prop('readonly', true).val($(e.target).text());
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="search">
<ul id="myid">
  <li>text1</li>
  <li>text2</li>
</ul>

我的用例：防止在单击 li 时显示移动键盘。

标签： htmljquery

Answer 1

您可以更改readonly输入焦点：

$('#myid li').click(function(e) {
  $('#search').prop('readonly', true).val($(e.target).text());
});

// Add focus listener
$("#search").on("focus", function(e){
  $(this).prop('readonly', false);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="search">
<ul id="myid">
  <li>text1</li>
  <li>text2</li>
</ul>