将输入搜索只读设置为 false onclick答案

【问题标题】：Set input search readonly to false onclick将输入搜索只读设置为 false onclick
【发布时间】：2020-06-08 08:54:01
【问题描述】：

单击 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时显示手机键盘。

【问题讨论】：

标签： html jquery

【解决方案1】：

我认为它是直截了当的。您只需单击文本字段并将其 readyonly 设置为 false

$('#search').click(function(e) { $('#search').prop('readonly', false); });

$('#myid li').click(function(e) {
    $('#search').prop('readonly', true).val($(e.target).text());
  });
  
$('#search').click(function(e) {
  $('#search').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>

【讨论】：

谢谢先生！这真的很简单，我太专注于在同一行内改变价值。 :)

【解决方案2】：

您可以在输入焦点上更改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>

【讨论】：

感谢先生的回答，我试过了，但这个没有用。