输入框的信息提示
在很多时候我们都想要在用户输入信息之前在输入框给出提示,在用户输入信息后提示信息消失
1:在html5出现placeholder之后这个问题就很简单
2:用js做信息提示
第二种方法就是用onfocus和onblur这两个方法做一个切换的判断在输入框有焦点时判断里面的信息和提示信息是否一样如果一样就为空;当输入框失去焦点
后如果类容为空则在输入框换上提示信息
在很多时候我们都想要在用户输入信息之前在输入框给出提示,在用户输入信息后提示信息消失
1:在html5出现placeholder之后这个问题就很简单
<input type="text" class="use" name="q" placeholder="请输入用户名">但是对于placeholder只有在一些支持html5的浏览器才会有效果对于这样的问题就要借助js了
2:用js做信息提示
<input type="text" class="use" name="q" value="请输入账号" οnfοcus="if(this.value=='请输入账号'){this.value='';}"οnblur="if(this.value==''){this.value='请输入账号';}" maxlength="50" size="14" >
第二种方法就是用onfocus和onblur这两个方法做一个切换的判断在输入框有焦点时判断里面的信息和提示信息是否一样如果一样就为空;当输入框失去焦点
后如果类容为空则在输入框换上提示信息
对于上面的方法在遇到要输入密码的输入框就有会出现新的麻烦,因为我们想在没输入密码的时候能看到信息提示在输入密码是信息是type="password"类型的,所以就有了下面的写法;
<div class="land_ps button"> <input type="text" class="pw" name="" value="请输入密码" maxlength="20" size="14" id="tx"> <input type="password" class="pw" name="" maxlength="20" size="14" id="pwd" style="display: none"> </div>js:
var tx = document.getElementById("tx"), pwd = document.getElementById("pwd"); tx.onfocus = function(){ if(this.value != "请输入密码") return this.style.display = "none"; pwd.style.display = ""; pwd.value = ""; pwd.focus(); } pwd.onblur = function() { if (this.value != "") return; this.style.display = "none"; tx.style.display = ""; tx.value = "请输入密码"; }