Javascript 控制文本框的默认值

HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。Blabla网对表单有详细的介绍,这里不再重复。下面要介绍的是,如何用简单的Javascript语句对表单里文本框的默认值进行操作。

为了让用户知道文本框里应该填写什么,我们通常会给文本框一个默认值。为了方便用户,当用户的鼠标点击文本框,我们希望文本框里的默认值被清空;当用户的鼠标离开文本框,如果文本框是空的,我们希望把文本框的值设回默认值。要实现这些,我们要用到Javascript的事件触发。这里用到是:onFocus(聚焦,也就是鼠标点入文本框)和onBlur(模糊,也就是鼠标离开文本框)。

Javascript函数:

 
function clearDefault(el) {//清空
  if (el.defaultValue==el.value) el.value = "";
}
function resetDefault(el){// 重设
  if (el.value == '') el.value=el.defaultValue;
}

有了以上函数,我们就可以在表单的任意一个文本框里(text或者textarea)调用这两个函数:onFocus时调用clearDefault(this);onBlur时调用resetDefault(this)。例如:

 
<form>
Lastname: <input type="text" style="color:#666" name="lastname" value="你的姓" 
     onfocus="clearDefault(this)"; onblur="resetDefault(this);" />
<br /><br />
Firstname: <input type="text" style="color:#666" name="firstname" value="你的名" 
    onfocus="clearDefault(this);" onblur="resetDefault(this);"  />  
<br /><br />
个人简介:
<br /><br /> 
<textarea cols="60" rows="5" name="msg" onfocus="clearDefault(this);">
  最多100个字,不含空格
</textarea>         
</form>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值