jQuery操作input改变value属性值

来源：互联网发布：盛世下的蝼蚁知乎编辑：程序博客网时间：2024/05/21 18:40

今天写了一个表单元素，在用户点击的时候会清空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"));            }        });    })

这样便看起来舒服多了。

0 0