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: .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: /

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.

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./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/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.

• javascript
• jquery
• internet-explorer

Share Improve this question Follow edited Sep 14, 2012 at 8:57 nmenego asked Sep 14, 2012 at 8:41 nmenegonmenego 86633 gold badges1717 silver badges3636 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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]++;
}

Here is your plete solution.

Demo http://codebins./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./bin/4ldqp79

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

Try this Demo

DEMO jQuery:

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