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

2017-7-6 18:46 来自本站原创 19,387 4 2

[摘要]

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

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

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

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

当用户打开页面的时候，插件对<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 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！