作者：Chinaexpoinfo | 来源：互联网 | 2014-05-21 09:34
前言：在很多时候，我们需要文本框中显示默认值，获取焦点时，文字框中就会清空给的值，当失去焦点时，如果没有值，继续显示默认的文字，如果有输入值，就显示输入的值。现在项目中需要用到这个地方的功能比较多
前言：在很多时候，我们需要文本框中显示默认值，获取焦点时，文字框中就会清空给的值，当失去焦点时，如果没有值，继续显示默认的文字，如果有输入值，就显示输入的值。现在项目中需要用到这个地方的功能比较多，于是想到了HTML5中的placeholder属性，但是总所周知，IE是咋们程序员心中的硬伤，不得不放弃。又不想在网上找这类似的，索性就自己写了一个，现在分享出来，供大家参考！
下面是插件的主要代码：
(function ($) {
$.fn.Placeholder = function (param) {
var defaults = {
defaultval: &＃39;data-defaultval&＃39;, //
defaultClass: &＃39;default_text_auto&＃39;, // 样式名称
tipstext: &＃39;&＃39;, // 默认提示文本，如果为空则或者defaultval的值，反之
focusClass: "block"
}
var $this = $(this);
var optiOns= $.extend(defaults, param);
var defaultval = options.tipstext == "" ? $this.attr(options.defaultval) : options.tipstext;
if (defaultval != "" && $this.val() == "") {
// 追加文字样式
$this.addClass(options.defaultClass);
// 赋值
$this.val(defaultval);
// 添加焦点事件
$this.focus(function () {
if ($(this).val() == defaultval) {
$(this).val("");
// 移除样式
$this.removeClass(options.defaultClass);
$this.addClass(options.focusClass);
}
// 添加移开焦点事件
}).blur(function () {
if ($(this).val() == "" || $(this).val() == defaultval) {
// 赋值
$(this).val(defaultval);
// 追加文字样式
$this.addClass(options.defaultClass);
$this.removeClass(options.focusClass);
}
});
} else {
$this.addClass(options.focusClass);
}
}
})(jQuery);
这里是相关的的样式
View Code
代码很简单，调用也很简单的：placeholder
/**
*
* 使用方法
* 最简单的调用方式
* $("#").Placeholder();
* $(".").Placeholder();
* $("input[type=&＃39;值&＃39;]").Placeholder();
*
*
*一般调用形式
* $("").Placeholder({
* placeholder: &＃39;data-val&＃39;,
* defaultClass: "class",
* tips: &＃39;测试文字&＃39;
* });
*/
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有