9

I'm trying to select the text in a readonly input box, using jQuery, this is what I have:

    $('input').focus(function(){
        $(this).select();
    })

When I click on the input however, it quickly selects all the text, it "blinks", then it goes back to normal state of being unselected.

Any ideas around this?

dzm
  • 22,844
  • 47
  • 146
  • 226
  • This seems to work ok for me although it depends where I click. Clicking the end of the text content works fine, clicking the middle does the blink you describe the first time and then works the second time. – Jamie Dixon Jun 24 '11 at 15:36
  • I tested the above code in jquery 1.4.3 and it works fine! – Taha Jahangir Jun 24 '11 at 15:39

8 Answers8

14

I got it working using the below code . My chrome version:Version 24.0.1312.52

$("#inputid").on("focus",function(e){
    $(this).select();
});

$("#inputid").on("mouseup",function(e){
    return false;
});

Hope this helps ...

saraf
  • 646
  • 4
  • 8
  • 4
    This is the cleanest solution, but you might want to use `e.preventDefault()` instead of `return false`. – iono Apr 27 '13 at 15:38
5

A combination of the two techniques worked for me, though my box wasn't read-only. The normal select() works right away in Firefox. However, in Safari, the mouseup and ordering of events causes it to deselect itself again on mouseup. I attached a mouseup event that starts a select on a delayed timer after the mouseup should have finished interfering (if the text is still the default text to be replaced).

Example:

$('#your_selector').focus(function() {
  $(this).select();
}).mouseup(function() {
  if ($(this).val() === 'Enter search terms here'){
    var _self = this;
    setTimeout(function(){ _self.select()},30)
  }
});
skunkshow
  • 96
  • 2
  • 4
4

The problem is with the fact that the input box is readonly (as you mention in you question).
(it is not a jQuery or javascript problem)

IE, FF and Opera have no problem. But Chrome and Safari exhibit the issue you mention..

Looks like a different implementation, and i am not sure you can work-around that..

demo to showcase (check in all browsers with console open)
http://jsfiddle.net/gaby/N9qzq/3/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
3
 <input onClick="this.select()" value="Blabla und Blublu" type="text" />

Should work

Mexx
  • 359
  • 3
  • 17
  • This functionality is the same as in the question - it'll have the same problem. – Izkata Oct 10 '13 at 21:23
  • 2
    The event is different: click instead of focus. See http://stackoverflow.com/questions/3150275/jquery-input-select-all-on-focus – Nacho Coloma Jun 13 '14 at 16:52
2

There's a little bit of an oddity happening here. focus happens on mousedown, but cursor placement happens on click (i.e. a mousedown followed by a mouseup). When the cursor is placed, any selection goes away.

So, you'll most likely want to keep your focus event (for tabbing and triggering purposes) but also add a click or a mouseup handler to do the actual select in the case of a click.

$('input[type="text"]').focus(function() {
    $(this).select();
}).click(function() {
    if ($(this).val() === 'Your default value')
    {
        $(this).select();
    }
});

The if exists so that once a user has customized text in your input, they can click around without selecting text. Although, that doesn't really apply to a readonly text input, so it may be safely removed.

Edit: Code seems to be inconsistent at best, so this may not be the solution.

Ryan Kinal
  • 17,414
  • 6
  • 46
  • 63
0

I had this problem testing on browsers. Google has this problem, I think Opera too. Firefox, IE ok. I solved it by this.select() on both onclick and onfocus.

mmacneill123
  • 33
  • 6
0

Based on what Gaby wrote in their post, this solution seems to be working for me:

$('input').focus(function(){
    var _self = this;
    setTimeout(function(){   console.log(_self.select())},100)
    })
Jamie Dixon
  • 53,019
  • 19
  • 125
  • 162
-2

Due to the inconsistency that people are mentioning, can you use CSS to simulate your selection? When the input receives the focus, apply CSS color and background-color so it looks like it's selected.

Babak Naffas
  • 12,395
  • 3
  • 34
  • 49