今天写了一个表单元素，在用户点击的时候会清空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"));
}
});
})
这样便看起来舒服多了。