js实现文本框获得焦点后提示内容消失

发布时间:2019-09-03编辑:脚本学堂
本文介绍了js实现文本框获得焦点,然后文本框中提示内容消失的实现方法,文本框添加触发事件onfocus和onblur,然后调用函数处理,需要的朋友参考下。

1、给文本框添加触发事件onfocus和onblur,调用函数处理。

例子:
 

复制代码 代码示例:
<script>
function cls(){
//捕获触发事件的对象,并设置为以下语句的默认对象
with(event.srcElement)
     //如果当前值为默认值,则清空
if(value==defaultValue) value=""
}
function res(){
//捕获触发事件的对象,并设置为以下语句的默认对象
with(event.srcElement)
//如果当前值为空,则重置为默认值
if(value=="") value=defaultValue
}
</script>
<input value="填写您的昵称" onfocus="cls()" onblur="res()">
<input value="填写您的生日(1900-01-01)"
onfocus="cls()" onblur="res()">
 

注意:本例的方法对大部分表单控件都有效,比如多行文本框。

在鼠标第一次单击文本框时该文本框内容将被清空,在文本框外单击时文本框内容将还原回默认值。如果改变了文本框的值,将不再有任何变化

说明:
本例主要是对象的defaultValue属性和onfocus、onblur事件的应用。
 

defaultValue 设置或获取对象的初始内容。
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。

2、用于清除输入框中提示信息的方法
 

复制代码 代码示例:
<html>
<head>
<title>评论-www.jb200.com</title>
<script type="text/javascript" language="javascript">
var gFlag=true;//全局变量,用于判断是否允许清除文本框内容
//用于清除输入框中提示信息的方法
function clearTip(){
 var oTxt=document.getElementByIdx_x_x("textfield");
  if(gFlag==true){
    oTxt.value="";
    gFlag=false;
 }
}
</script>
</head>
<body>
<form>
<label>
<textarea name="textfield" cols="40" rows="5" onfocus="clearTip()">请输入对KKKKK的评论......</textarea>
</label>
<p>
<label>
<input type="submit" name="Submit" value="提交">
</label>
</p>
</form>
</body>
</html>

运行以上例子,会看到当焦点定位在文本框,提示信息“请输入评论的内容...”将会自动消失。

要注意用户可能中途去做其他事情,使得文本框失去焦点,当重新输入时,又获得了焦点,这时会再次触发onfocus事件,调用clearTip方法,把前面输入的内容清除了。

可以设置个全局变量gFlag作为标志位,当清除过一次文本框的内容之后就改变标志位,不再允许通过clearTip()方法清除文本框的内容。
例子,如下:
 

复制代码 代码示例:
<input name="adminid" type="text" size="12" style="border:1PX; border:#CCCCCC;color:#CCCCCC" value="请输入验证码"
onclick="if(this.value=='请输入验证码')this.value=''" >