一个简单的input文字判断效果 .js+jq
(function($){
$.fn.val2 = $.fn.val;
$.fn.emptyValue = function(arg){
this.each(function(){
var input = $(this);
var options = arg;
if(typeof options == "string"){
options = {empty: options}
}
options = jQuery.extend({
empty: input.attr("data-empty")||"",
className: "gray"
}, options);
input.attr("data-empty",options.empty);
return input.focus(function(){
$(this).removeClass(options.className);
if($(this).val2() == options.empty){
$(this).val2("");
}
}).blur(function(){
if($(this).val2()==""){
$(this).val2(options.empty);
}
$(this).addClass(options.className);
}).blur();
});
};
//重写jquery val方法，增加data-empty过滤
$.fn.val = function(){
var value = $(this).val2.apply(this,arguments);
var empty = $(this).attr("data-empty");
if(typeof empty != "undefined"&&empty==value){
value = "";
}
return value;
};
})(jQuery);
//有三种调用方法
//第一种
jQuery("input").emptyValue();
//这中调用方法写起来最简单，但需要所选择input标签含有data-empty属性
//用于记录输入框为空时候的提示内容
//第二种
jQuery("input").emptyValue("请输入要搜索的内容");
//直接将提示内容传递进去，优先级要高于第一种方法
//第三种
jQuery("input").emptyValue({
empty: "请输入要搜索的内容", //传入提示内容
className: "gray" //输入框失去焦点时，输入框的样式名，通常用户让字体颜色变灰
});
//gray样式代码：
.gray{
color:#999;
}
$(document).ready(function() { //each遍历文本框 $(".input").each(function() { //保存当前文本框的值 var vdefault = this.value; $(this).focus(function() { //获得焦点时，如果值为默认值，则设置为空 if (this.value == vdefault) { this.value = ""; } }); $(this).blur(function() { //失去焦点时，如果值为空，则设置为默认值 if (this.value == "") { this.value = vdefault; } }); }); });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> input{ width:200px; height:24px; line-height:24px; border:1px solid #999; background:#ccc; margin:15px 0 0 100px; padding:4px; color:#666;} .current{ background:#E0FEE4; border:1px solid #093;} </style> </head> <body> <input name="" type="text" value="请输入姓名："/><br /> <input name="" type="text" value="请输入昵称："/><br /> <input name="" type="text" value="输入验证码："/><br /> <input name="" type="text" value="请输入手机号码："/><br /> <input name="" type="text" value="请输入电子邮件："/> <script type="text/javascript"> var aInp=document.getElementsByTagName('input'); var i=0; var sArray=[]; for(i=0; i<aInp.length; i++) { aInp[i].index=i; sArray.push(aInp[i].value); aInp[i].onfocus=function() { if(sArray[this.index]==aInp[this.index].value) { aInp[this.index].value=''; } aInp[this.index].className='current'; }; aInp[i].onblur=function() { if(aInp[this.index].value=='') { aInp[this.index].value=sArray[this.index]; } aInp[this.index].className=''; }; } </script> </body> </html>
简化，充分利用this关键字：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> input{ width:200px; height:24px; line-height:24px; border:1px solid #999; background:#ccc; margin:15px 0 0 100px; padding:4px; color:#666;} .current{ background:#E0FEE4; border:1px solid #093;} </style> </head> <body> <input name="" type="text" value="请输入姓名："/><br /> <input name="" type="text" value="请输入昵称："/><br /> <input name="" type="text" value="输入验证码："/><br /> <input name="" type="text" value="请输入手机号码："/><br /> <input name="" type="text" value="请输入电子邮件："/> <script type="text/javascript"> var sIpt = document.getElementsByTagName('input'), sArray = []; for(var i = 0; i < sIpt.length; i++){ sIpt[i].index = i; sArray.push(sIpt[i].value); sIpt[i].onfocus = function(){ if(this.value === sArray[this.index]){ this.value = ''; } this.className = 'current'; } sIpt[i].onblur = function(){ if(this.value === ''){ this.value = sArray[this.index]; } this.className = ''; } } </script> </body> </html>
