单击“使用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; }
这适用于我在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(); }); });