一个简单的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>

 

 

 

 

 

 

 

posted @ 2012-04-17 17:44  赵小磊  阅读(548)  评论(0)    收藏  举报
回到头部