CODEWITHSUNDEEP
htmljquery
88willr
88willr

Reputation: 148

Set input search readonly to false onclick

Clicking li will insert text to search field and making it in readonly at the same time. How can I set the value to false when clicking on the input box? Thanks for your help.

  $('#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>

My use case: to prevent mobile keyboard showing when clicking the li.

Upvotes: 0

Views: 42

Answers (2)

muasif80
muasif80

Reputation: 6006

I thinks its straight forward. You can just use the click on the text field and set its readyonly to 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>

Upvotes: 1

Kalimah
Kalimah

Reputation: 11437

You can change readonly on input focus:

$('#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>

Upvotes: 1

Related Questions