Javascript 控制文本框的默认值

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

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>。

相关文档
最新文档