单击“使用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.

Answer 1

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]++;
}

Answer 2

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

Answer 3

Try this Demo

DEMO jQuery:

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

Answer 4

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