jQuery操作input改变value属性值

今天写了一个表单元素，在用户点击的时候会清空input中的内容，当鼠标点击其他地方的时候会把输入的值保存为input的value值

类似于这样的效果

当用户点击的时候文字消失。

html代码

     <input type="text" name="" value="请输入您的邮箱地址"/>
     <input type="text" name="" value="请输入用户名"/>
     <input class="pwd" type="text" name="" value="请输入密码"/>
     <input class="pwd" type="text" name="" value="确认密码"/>

jq代码

<script type="text/javascript">
	$(document).ready(function(e) {
        var temp;
        $(":text").focusin(function(){
            var value = $(this).val();
            if ($(this).val() == "请输入密码" || $(this).val() == "请输入您的邮箱地址" || $(this).val() == "确认密码" || $(this).val() =="请输入用户名") {				
				if($(this).val() == "确认密码" || $(this).val() == "请输入密码") {
					$(this).attr('type','password')
				}
                $(this).val("")
			}
            //alert(value)
		})
		$(":input").focusout(function(event) {
            /* Act on the event */
            if($(this).val() == "") {              
                if ($(this).hasClass('pwd')) {
                    $(this).attr('type','text')
                };
                $(this).val(temp)
            }
        });
    })

</script>

这样之后基本所要求的功能可以实现，但是发现代码不够优雅，于是又想到了可以使用数组来保存value值，

var arr_ = [];
        var temp;
        $(":text").each(function() {
            arr_.push($(this).val())
        })
        $(":text").focusin(function(){
			var that = this;
            var value = $(that).val();
            temp = value;
            $.each(arr_,function(i,n) {
				if(value==n){
					$(that).val("");
					if(value=="请输入密码"||value=="确认密码"){
						$(that).attr("type","password");
					}
				}
            });
		})

又发现了一个问题， 总是需要一个全局变量temp来保存value值，这对于javascript来说是不好的，于是乎又想到了data属性

<input type="text" name="" data="请输入您的邮箱地址" value="请输入您的邮箱地址"/>
            <input type="text" name="" data="请输入用户名" value="请输入用户名"/>
            <input class="pwd" type="text" data="请输入密码" name="" value="请输入密码"/>
            <input class="pwd" type="text" data="确认密码" name="" value="确认密码"/>

$(document).ready(function(e) {
        var arr_ = [];
        $(":text").each(function() {
            arr_.push($(this).val())
        })
        $(":text").focusin(function(){
			var that = this;
            var value = $(that).val();
            $.each(arr_,function(i,n) {
				if(value==n){
					$(that).val("");
					if(value=="请输入密码"||value=="确认密码"){
						$(that).attr("type","password");
					}
				}
            });
		})
		$(":input").focusout(function(event) {
            /* Act on the event */
            if($(this).val() == "") {              
                if ($(this).hasClass('pwd')) {
                    $(this).attr('type','text')
                };
                $(this).val($(this).attr("data"));
            }
        });
    })

这样便看起来舒服多了。

转载于:https://www.cnblogs.com/xjcjcsy/p/4196363.html