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

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

谢谢。

几个文本框的问题是你的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]++; } 

这是您的完整解决方案。

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

HTML

 

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

这适用于我在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 }); 

DEMO

试试这个演示

演示jQuery:

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