一个优秀的表单输入框默认提示文字JQuery插件

2017-7-6 18:46 来自本站原创 19,418 4 2
[摘要]

jQuery.setTip.js,一个优秀的jQuery插件,通过设置输入框的默认value值来兼容各版本的浏览器。

在前端开发中,提交表单是经常遇到的,一个友好的表单页面(登陆、注册等)对于提升用户体验来说非常重要。在表单的输入框我们一般都会写入提示性的问题,比如“请输入手机号”等。较为理想的状态是,用户看到这段提示性文字,当用户鼠标点击的时候,输入框为空,方便用户填入文字。

一般情况下我们都会使用<input name="text" placeholder="用户名" />,但是placeholder作为一个html5属性,它并不支持IE8及以下版本的ie,为此笔者写过《placeholder属性在IE中失效的解决办法》

但最近笔者发现一个优秀的jQuery插件,通过设置输入框的默认value值来兼容各版本的浏览器。这时你可能会说,value值是实实在在存在输入框中的,是默认值,用户需要删除它才能继续输入内容,不友好啊。是的,我们直接在输入框写入<input name="text" value="用户名" />确实不太友好,所以这个插件就解决了这个问题啊

一个优秀的表单输入框默认提示文字JQuery插件

当用户打开页面的时候,插件对<input>赋予默认的value值,而当用户点击输入框的时候,插件将会去除value值,实现了placeholder的功能,而又兼容各种浏览器,非常的实用啊。

下面将插件代码放出来

(function($) { 
 $.fn.setTip = function(options) { 
 var defaults = { 
 defaultValue: "", 
 focusColor: "#000000", 
 blurColor: "#ccc", 
 fontSize: "10pt" 
 } 
 var options = $.extend(defaults, options); 
 this.each(function() { 
 var thisSearch = $(this); 
 thisSearch.focus(function() { 
 if (thisSearch.val() == options.defaultValue) { 
 thisSearch.css("color", options.focusColor); 
 thisSearch.val(""); 
 } 
 }).blur(function() { 
 if ( thisSearch.val() === undefined || thisSearch.val() == '') { 
 thisSearch.css("color", options.blurColor); 
 thisSearch.val(options.defaultValue); 
 } 
 }).css({ "color": options.blurColor, "font-size": options.fontSize }); 
 if (thisSearch.val() == 'undefined' || thisSearch.val() == "") { 
 thisSearch.val(options.defaultValue); 
 } else if (thisSearch.val() != options.defaultValue) { 
 thisSearch.css("color", options.focusColor); 
 } 
 }); 
 }; 
})(jQuery);

可以将其直接放入你的js文件中,但是考虑到维护性,笔者建议你将其另存为jQuery.setTip.js,以便多处调用。

之后设置需要启用此功能的输入框

<script type="text/javascript" src="jQuery.setTip.js"></script> 
 <script type="text/javascript"> 
 $(document).ready(function () { 
 $("#newInput").setTip({defaultValue:"世界,你好!"}); 
 }); 
 </script> 
</head> 
<body> 
 <input type="text" id="newInput" > 
</body>

此时,输入框的提示文字效果就出来了。在线demo

对了,这是jQuery插件,是要先加载jQuery库的哦。

本文最后更新于2017年7月6日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:4   其中:访客  0   博主  0
    加载中...
    1. 7年前 (2017-07-26) 0楼

      placeholder兼容性不好,还是这个好

    2. 7年前 (2017-07-10) 0楼

      这个还是非常人性化的,不错

    3. 音符 2
      7年前 (2017-07-09) 0楼

      感觉很实用啊

    4. 7年前 (2017-07-09) 0楼

      非常感谢,写的真的很好。

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 4 2 19,418
    Top