How to select and deselect readonly input on mouseenter ande mouseleave

Question

I am using jquery 1.8.2, and this is my html:

<input type="text" class=autoSelect" value="TEXT" readonly/>

I wanna be able to select the text on mouseenter, and deselect(blur) on mouseleave evnets, but it dosen't work when i have the readonly attr. Well everything works except the .blur(), both the events is triggered and .select() works fine. i have tried several combinations of:

$('.autoSelect').mouseenter(function () {
    $(this).select();
});
enter code here
$('.autoSelect').mouseleave(function () {
    $(this).blur();
});

Thanks in advance!

score 1 · Accepted Answer · edited May 23 '17 at 10:26

to deselect text, use the following code.

Source: https://stackoverflow.com/a/6187098/381709

$('.autoSelect').mouseenter(function() {

  $(this).select();
});

$('.autoSelect').mouseleave(function() {

  if (document.selection) // IE
    document.selection.empty();
  else
    window.getSelection().removeAllRanges()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" class="autoSelect" value="TEXT" readonly/>

score 0 · Answer 2 · answered Aug 04 '15 at 07:54

Try this:

<input type="text" id="myInput" class=autoSelect" value="TEXT" readonly/>

$('.autoSelect').mouseenter(function () {
    $('#myInput').attr('readonly', false);
    $(this).select();
});
enter code here
$('.autoSelect').mouseleave(function () {
    $('#myInput').attr('readonly', true);
    $(this).blur();
});

How to select and deselect readonly input on mouseenter ande mouseleave

2 Answers2