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

[摘要]

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

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

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

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

当用户打开页面的时候，插件对赋予默认的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，以便多处调用。

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

$(document).ready(function () {

$("#newInput").setTip({defaultValue:"世界，你好！"});

});

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

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

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