Question

我想在IE9中创建以下行为：

单击文本框将从文本框中选择文本。再次单击它将取消选择文本。

我尝试了以下内容：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++;
}

我也用过：http://jsfiddle.net/HmQxZ/1/

但是，当应用于多个文本框时，上述解决方案具有奇怪的行为。解决此类问题的最佳方法是什么？是否可以在不使用全局变量的情况下执行此操作？

更新

小提琴适用于Chrome。但它在IE9中不起作用。在IE9中，文本被选中，但是当您再次单击文本框时，文本不会被取消选中/不突出显示。在Chrome中，第二次点击取消选中/取消突出显示文字。

谢谢。

Answer 1

多个文本框的问题是您的x变量是全局变量。您需要为每个文本框添加一个单独的x变量。

您可以使用地图：

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

这适用于Chrome浏览器 - jQuery中有一个toggle event函数，但在这种情况下不需要它

$('input').click(function() {
 // the select() function on the DOM element will do what you want
 this.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

这是您的完整解决方案。

演示 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;
}

演示 http://codebins.com/bin/4ldqp79

单击“使用jQuery”选择/取消选择“文本”

4 个答案: