1

我想在 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 中，第二次单击会取消选择/取消突出显示文本。

谢谢你。

4

4 回答 4

3

几个文本框的问题是您的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]++;
}
于 2012-09-14T08:45:24.927 回答
0

这在 Chrome 中适用于我 - jQuery 中有一个切换事件功能，但在这种情况下不需要

$('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 
});

​<a href="http://jsfiddle.net/mplungjan/fU83Y/" rel="nofollow">演示

于 2012-09-14T08:49:16.960 回答
0

试试这个演示

演示 jQuery：

$(function(){
    $("input[type='Text']").on("click",function(){
     if (typeof this.selectionStart == "number") 
         this.select();
    });
  });
于 2012-09-14T08:56:19.783 回答
0

这是您的完整解决方案。

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

于 2012-09-14T09:41:10.533 回答