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