12

After I use .select() to select the text in the input box when hovered over I did the following:

HTML:

<input type="text" class="hoverAble" value="hover here"/><br />

jQuery:

$(".hoverAble").mouseenter(function() {

    this.select();

}).mouseleave(function() {

    //I can't figure what to put here.
});

See here. Warning for it to function correctly (in jsfiddle) you must click once in the result frame.

The main idea is mouseleave is working as as expected also.

As you might have noticed, I can't figure out a way to un-select the text when you hover out and avoid this:

enter image description here

Trufa
  • 39,971
  • 43
  • 126
  • 190

7 Answers7

13

use .blur();

http://jsfiddle.net/robert/adCfw/6/

Robert
  • 21,110
  • 9
  • 55
  • 65
  • Ohh that was easier that I though, thank you! I did not know how to look for that, I tried all sorts of "jquery unselect" search combinations with no success. Thank you! +1 and I'll wait just a bit to accept. – Trufa May 02 '11 at 19:13
  • 1
    Doesn't work on Chrome (version 31.0.1650.63) on ubuntu (Firefox works). Fix is to $(this).focus() first, then $(this).blur() – Jeffrey Martinez Jan 13 '14 at 06:02
8

In this case, blur() only unfocus from the input text, and although it gives the appearance the text is not selected anymore, it is still selected. To truly unselect any text, you would do:

$(".hoverAble").mouseenter(function() {
    this.select();
}).mouseleave(function() {
    $(this).prop('selectionStart', 0).prop('selectionEnd',0).blur();
});
Jacques
  • 991
  • 1
  • 12
  • 15
2

If you are using jQuery, try using blur().

$(this).blur();
Avisra
  • 740
  • 5
  • 14
1
input.hover(function(){$(this).select();}, function(){$(this).val($(this).val());});
user199403
  • 483
  • 1
  • 6
  • 11
1

This works:

$(".hoverAble").hover(function() {

    $(this).select();
    $(this).after("<input type='text' style='height:0;width:0;border:0;padding:0;margin:0;' id='tmp_hidden' />");

}, function(){

    $("#tmp_hidden").select().remove();

});

There should be a better way to solve it thought.

Edit: of course there's blur().

Karl Laurentius Roos
  • 4,360
  • 1
  • 33
  • 42
0

if you use jQuery, you could try one of the many plugins for unselecting or setting the caret position by your needs, e.g. this one. if you don't, you still can use the pure JavaScript of these plugins due to the open-source-licences

meistermuh
  • 393
  • 3
  • 11
0

The best solution if you did not want to blur your input is:

getSelection().collapseToEnd()
Konstantin Vertinskiy
  • 21
  • 1
  • 1