Select/Unselect Text on click Using jQuery

Question

I want to create the following behavior in IE9:

Clicking on the textbox will select the text from the textbox. Clicking on it again will unselect the text.

I tried the following from this linK: http://www.codingforums.com/showthread.php?t=105530

var x = 2;

function selectIt(obj)
{
    if (x % 2 == 0)
    {
        obj.select();
    }
    else
    {
        if (document.selection)
        {
            document.selection.empty();
            obj.blur();
        }
        else
        {
            window.getSelection().removeAllRanges();
        }
    }
    obj.focus();
    x++;
}

I also used this: http://jsfiddle.net/HmQxZ/1/

But the above solutions have weird behaviors when applied to several textboxes. What is the best way to approach this kind of problem. Is it possible to do this without using a global variable?

UPDATE:

The fiddle works in Chrome. But it does not work in IE9. In IE9, the text is selected but when you click on the textbox again, the text is not unselected/unhighlighted. In Chrome, the second click unselects/unhighlights the text.

Thank you.

Ridcully · Accepted Answer · 2012-09-14T09:01:10.070

3

The problem with several text boxes would be that your x variable is global. You'd need a separate x variable per textbox.

You could use a map:

var x = {};

function selectIt(obj)
{
    var key = ... <-- get name (or id) of textbox from obj somehow to use as key in map
    if (!x.hasOwnProperty(key)) x[key] = 0;
    if (x[key] % 2 == 0)
    {
        obj.select();
    }
    else
    {
        if (document.selection)
        {
            document.selection.empty();
            obj.blur();
        }
        else
        {
            window.getSelection().removeAllRanges();
        }
    }
    obj.focus();
    x[key]++;
}

edited Sep 14 '12 at 09:01

answered Sep 14 '12 at 08:45

Ridcully

23,362
7
71
86

Thank you, @Ridcully. I do understand that which is why I am asking if it is possible to do so without the use of a global variable. My form contains several textboxes having the same behavior. I would like to know the best way to do this. – nmenego Sep 14 '12 at 08:48
Basically I would suggest to check if anything is selected of the textbox clicked -- if so, unselect everything, if not, select everything. But, according to jquery's documentation of the select() function, checking for a selected part is depending on the browser (The method for retrieving the current selected text differs from one browser to another. A number of jQuery plug-ins offer cross-platform solutions.), so either you use one of those plugins or you use a variation of your original code with the x variable. – Ridcully Sep 14 '12 at 08:52
@nmengo I added an example using a map for x. – Ridcully Sep 14 '12 at 09:01
Thanks. This was not exactly what I was looking for. But I think it is a good enough answer. – nmenego Sep 15 '12 at 05:13

mplungjan · Answer 2 · 2012-09-14T09:53:48.380

0

This works for me in Chrome - there is a toggle event function in jQuery but it is not needed in this case

$('input').click(function() {
 // the select() function on the DOM element will do what you want
 this.select();
});

but I suggest you tell the script which types of fields you want to select

$("input[type=text], input[type=url]").click(function() {
  $(this).select(); // "this" is native JS 
});

DEMO

edited Sep 14 '12 at 09:53

answered Sep 14 '12 at 08:49

mplungjan

169,008
28
173
236

I forgot to mention that I need it in IE9. But thanks for your answer. – nmenego Sep 14 '12 at 08:52
It highlights the textbox, but when I click on it again, it does not unselect/unhighlight. In Chrome, select/unselect is possible. – nmenego Sep 14 '12 at 08:56
I would suggest using `$(this)` over this. Not that it wouldn't work otherwise, but it gives you more options when you need them. See http://stackoverflow.com/questions/3889570/what-is-the-difference-between-this-this-and-this – Flater Sep 14 '12 at 09:12

score 0 · Answer 3 · edited Jan 15 '16 at 22:02

0

Try this Demo

DEMO jQuery:

$(function(){
    $("input[type='Text']").on("click",function(){
     if (typeof this.selectionStart == "number") 
         this.select();
    });
  });

edited Jan 15 '16 at 22:02

marc_s

732,580
175
1,330
1,459

answered Sep 14 '12 at 08:56

GajendraSinghParihar

9,051
11
36
64

score 0 · Answer 4 · answered Sep 14 '12 at 09:41

Here is your complete solution.

Demo http://codebins.com/bin/4ldqp79

HTML

<div id="panel">
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
  <input type="text" value="Click Me to Select Text" />
</div>

JQuery

$(function() {
    $("#panel input[type=text]").click(function() {
        $(this).select();
    });
});

CSS

input{
  display:block;
  border:1px solid #333;
  background:#efefef;
  margin-top:15px;
  padding:3px;
}

Demo http://codebins.com/bin/4ldqp79

EXACTLY the same solution as mine and it STILL does not work in IE — mplungjan, Sep 14 '12 at 09:55

Select/Unselect Text on click Using jQuery

4 Answers4

Linked