jQuery 屏蔽输入插件。当文本框获得焦点时选择所有内容

Posted

技术标签:

【中文标题】jQuery 屏蔽输入插件。当文本框获得焦点时选择所有内容【英文标题】：jQuery masked input plugin. select all content when textbox receives focus 【发布时间】：2010-10-03 14:50:01 【问题描述】：

这是这个问题的后续问题：

select all contents of textbox when it receives focus (javascript or jQuery)

基本上我将文本框与jQuery masked input plugin结合使用（编辑：链接可能不再指向相关版本）

当被屏蔽的输入文本框获得焦点时，我想选择该文本框的所有内容，但似乎将此插件绑定到文本框会阻止这种情况。我只是想知道是否有办法解决这个问题。

以下是演示该问题的示例 .html 页面：

<html>
<head>
    <title></title>
</head>
<body>
    <input id="masktest" type="text" value="01/01/2009" />
    <br />
    <input id="focustest" type="text" value="on focus will select all contents..." />

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.1.pack.js"></script>
    <script type="text/javascript">
        $(function() 
            $("#masktest").mask("99/99/9999");

            // Contents of textboxes will be selected when receiving focus.
            $("input[type=text]")
                .focus(function() 
                    $(this).select();
                );
        );
    </script>
</body>
</html>

【问题讨论】：

【参考方案1】：

我是 jQuery 的 Masked Input Plugin 的作者。我决定这应该是已完成掩码的默认行为，并将其放入最新版本。可以阅读详情here

【讨论】：

你的插件支持货币屏蔽吗？像 $3,439.44【参考方案2】：

嘿乔恩，不太确定这个性能，但这应该工作：

    $(function() 


        // Contents of textboxes will be selected when receiving focus.
        $("input[type=text]")
            .focus(function() 
                var mask = "99/99/9999";
                $(this).unmask(mask).select().mask(mask);
            );
    );

【讨论】：

【参考方案3】：

它在 FF3 中为我工作。

$("input[type=text]").focus(function(e) 
  var that = this;
  setTimeout(function()$(that).select();,10);
  return false;
);

setTimeout 将“排队”执行 select()，我想知道： - 好的掩码功能做你的工作然后我会选择内容。 THEN 就是队列有用的地方。

只是一个想法。我希望它能按预期工作。

【讨论】：

它可以工作（在 IE7 中也是如此）！也很方便知道，我可以看到这在可能发生的其他类似情况下可能很有用。 我无法让这个解决方案与 setTimeout 一起使用...但是通过 $("body").animate(opacity:1.0, 10, function()$(that).select (););效果很好【参考方案4】：

问题

焦点时删除默认值

解决：在 mask.js 文件中添加了少量补丁代码 (jquery.maskedinput-1.2.2.min.js)

(function(a)var c=(a.browser.msie?"paste":"input")+".mask";var b=(window.orientation!=undefined);a.mask=definitions:"9":"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]";a.fn.extend(caret:function(e,f)if(this.length==0)returnif(typeof e=="number")f=(typeof f=="number")?f:e;return this.each(function()if(this.setSelectionRange)this.focus();this.setSelectionRange(e,f)elseif(this.createTextRange)var g=this.createTextRange();g.collapse(true);g.moveEnd("character",f);g.moveStart("character",e);g.select())elseif(this[0].setSelectionRange)e=this[0].selectionStart;f=this[0].selectionEndelseif(document.selection&&document.selection.createRange)var d=document.selection.createRange();e=0-d.duplicate().moveStart("character",-100000);f=e+d.text.lengthreturnbegin:e,end:f,unmask:function()return this.trigger("unmask"),mask:function(j,d)if(!j&&this.length>0)var f=a(this[0]);var g=f.data("tests");return a.map(f.data("buffer"),function(l,m)return g[m]?l:null).join("")d=a.extend(placeholder:"_",completed:null,d);var k=a.mask.definitions;var g=[];var e=j.length;var i=null;var h=j.length;a.each(j.split(""),function(m,l)if(l=="?")h--;e=melseif(k[l])g.push(new RegExp(k[l]));if(i==null)i=g.length-1elseg.push(null));return this.each(function()var ORJ=$(this).val();var r=a(this);var m=a.map(j.split(""),function(x,y)if(x!="?")return k[x]?d.placeholder:x);var n=false;var q=r.val();r.data("buffer",m).data("tests",g);function v(x)while(++x<=h&&!g[x])return xfunction t(x)while(!g[x]&&--x>=0)for(var y=x;y<h;y++)if(g[y])m[y]=d.placeholder;var z=v(y);if(z<h&&g[y].test(m[z]))m[y]=m[z]elsebreaks();r.caret(Math.max(i,x))function u(y)for(var A=y,z=d.placeholder;A<h;A++)if(g[A])var B=v(A);var x=m[A];m[A]=z;if(B<h&&g[B].test(x))z=xelsebreakfunction l(y)var x=a(this).caret();var z=y.keyCode;n=(z<16||(z>16&&z<32)||(z>32&&z<41));if((x.begin-x.end)!=0&&(!n||z==8||z==46))w(x.begin,x.end)if(z==8||z==46||(b&&z==127))t(x.begin+(z==46?0:-1));return falseelseif(z==27)r.val(q);r.caret(0,p());return falsefunction o(B)if(n)n=false;return(B.keyCode==8)?false:nullB=B||window.event;var C=B.charCode||B.keyCode||B.which;var z=a(this).caret();if(B.ctrlKey||B.altKey||B.metaKey)return trueelseif((C>=32&&C<=125)||C>186)var x=v(z.begin-1);if(x<h)var A=String.fromCharCode(C);if(g[x].test(A))u(x);m[x]=A;s();var y=v(x);a(this).caret(y);if(d.completed&&y==h)d.completed.call(r)return falsefunction w(x,y)for(var z=x;z<y&&z<h;z++)if(g[z])m[z]=d.placeholderfunction s()return r.val(m.join("")).val()function p(y)var z=r.val();var C=-1;for(var B=0,x=0;B<h;B++)if(g[B])m[B]=d.placeholder;while(x++<z.length)var A=z.charAt(x-1);if(g[B].test(A))m[B]=A;C=B;breakif(x>z.length)breakelseif(m[B]==z[x]&&B!=e)x++;C=Bif(!y&&C+1<e)r.val(ORJ);w(ORJ.length,h)elseif(y||C+1>=e)s();if(!y)r.val(r.val().substring(0,C+1))return(e?B:i)if(!r.attr("readonly"))r.one("unmask",function()r.unbind(".mask").removeData("buffer").removeData("tests")).bind("focus.mask",function()q=r.val();var x=p();s();setTimeout(function()if(x==j.length)r.caret(0,x)elser.caret(x),0)).bind("blur.mask",function()p();if(r.val()!=q)r.change()).bind("keydown.mask",l).bind("keypress.mask",o).bind(c,function()setTimeout(function()r.caret(p(true)),0))p())))(jQuery);

【讨论】：

【参考方案5】：

如果您的“完成”功能不起作用，请尝试替换此行：

if (settings.completed &amp;&amp; next == len)

（这是非压缩插件的第 169 行）：

if (settings.completed &amp;&amp; eval(+next - 1) == len)

在使用这个插件和 firebug 时，我注意到，当输入掩码的最后一个字符时，“下一个”变量会跳过一个符号。 这种方式应该可行。

【讨论】：

【参考方案6】：

我找到了比超时更好的解决方案。

你可以查看 jquery.maskedinput.js:293 有一个输入焦点的功能，它只在没有“只读”属性的输入上触发，所以：

$("input[type=text]").attr("readonly", true).select().removeAttr("readonly");

...就这样。像魅力一样工作；）

【讨论】：

以上是关于jQuery 屏蔽输入插件。当文本框获得焦点时选择所有内容的主要内容，如果未能解决你的问题，请参考以下文章

C# winform中咋实现当文本框获得焦点时,如何切换到中文输入法或英文输入法啊?

JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

C# WinForm 文本框离开焦点事件 问题？？？

input文本框获取焦点和失去焦点事件判断

文本框获得焦点时，显示旁边的文字

axure7.0如何实现光标在文本框中获得焦点时，文本框内容自动清空。失去焦点时显示默认文字，谢谢！