输入框提示信息

输入框的信息提示  
在很多时候我们都想要在用户输入信息之前在输入框给出提示,在用户输入信息后提示信息消失
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 = "请输入密码";
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值