当文本框第一次获得焦点时,清空文本框中原有的内容
2011-06-29 15:09
323 查看
如何让文本框内的提示信息在激活文本框时清空
解决思路:
当需要填写的文本框很多时,在每个文本框内写上提示信息是个不错的办法,但这样一来用户在填写该项时必须先把提示文本删掉,非常不方便。所以应该让文本框更人性化一点,在focus时检查当前值是否为文本框的默认值,是则清空,否则保持不变,而在blur时检查文本框的内容是否为空,是则重置为默认值,否则保持不变。
具体步骤:
1.设置文本框的默认值或提示信息。
<input value="填写您的昵称">
<input value="填写您的生日(1900-01-01)">
2.判断、清空文本框内容的函数。
function cls(){
with(event.srcElement)
if(value==defaultValue) value=""
}
3.判断、还原文本框内容的函数。
function res(){
with(event.srcElement)
if(value=="") value=defaultValue
}
4.给文本框添加触发事件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()">
注意:本例的方法对大部分表单控件都有效,比如多行文本框。
特别提示
运行完整代码,在鼠标第一次单击文本框时该文本框内容将被清空,在文本框外单击时文本框内容将还原回默认值。如果改变了文本框的值,将不再有任何变化。图1.4.28为代码运行时的初始效果,图1.4.29为鼠标单击第二个文本框后的效果。
图1.4.28 代码运行后的初始效果
图1.4.29鼠标单击文本框时的效果
defaultValue 设置或获取对象的初始内容。
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
解决思路:
当需要填写的文本框很多时,在每个文本框内写上提示信息是个不错的办法,但这样一来用户在填写该项时必须先把提示文本删掉,非常不方便。所以应该让文本框更人性化一点,在focus时检查当前值是否为文本框的默认值,是则清空,否则保持不变,而在blur时检查文本框的内容是否为空,是则重置为默认值,否则保持不变。
具体步骤:
1.设置文本框的默认值或提示信息。
<input value="填写您的昵称">
<input value="填写您的生日(1900-01-01)">
2.判断、清空文本框内容的函数。
function cls(){
with(event.srcElement)
if(value==defaultValue) value=""
}
3.判断、还原文本框内容的函数。
function res(){
with(event.srcElement)
if(value=="") value=defaultValue
}
4.给文本框添加触发事件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()">
注意:本例的方法对大部分表单控件都有效,比如多行文本框。
特别提示
运行完整代码,在鼠标第一次单击文本框时该文本框内容将被清空,在文本框外单击时文本框内容将还原回默认值。如果改变了文本框的值,将不再有任何变化。图1.4.28为代码运行时的初始效果,图1.4.29为鼠标单击第二个文本框后的效果。
图1.4.28 代码运行后的初始效果
图1.4.29鼠标单击文本框时的效果
特别说明
本例主要是对象的defaultValue属性和onfocus、onblur事件的应用。defaultValue 设置或获取对象的初始内容。
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
相关文章推荐
- Jquery实现文本框获取焦点清空内容,失去焦点重新获得内容
- Jquery实现文本框获取焦点清空内容,失去焦点重新获得内容
- 文本框获得焦点清空文本内容
- Jquery实现文本框获取焦点清空内容,失去焦点重新获得内容的公共函数
- 文本框获得焦点,并且同时清空文本框内原有的文字。 如果文本框内已经有用户输入的内容了,那么就不应该进行清除文本款内容这个动作
- 文本框失去焦点有提示信息,文本框获得焦点清空提示信息,并且字体颜色不同
- ueditor文本框初始化如何显示默认内容,以及文本框获取焦点后清空默认内容
- 文本框得到焦点後,清空内容,失去焦点,还原成默认值
- TextBox控件文本默认内容当文本获得焦点的时候清空内容。
- select默认选中第一次 (清空文本框内容)
- juery文本框获得焦点和失去焦点是,对文本内容的处理
- JavaScript获取文本框的焦点是将内容清空
- 文本框内默认提示————请输入用户姓名(字体灰色),要求: (1)当文本框获得焦点时,默认提示消失 (2)当文本框失去焦点时,如果没有输入新内容,那么则显示原来的灰色字体内容; 如果有新内容输入则判断,如果长度小于10,则提示“姓名长度应该大于10个字符”
- jquery 获得焦点的时候,焦点时文本框清空,失去焦点时又显示默认文字
- JavaScript基础 text文本框获得焦点时,其中的内容被全选 this.select()
- 文本框得到焦点,并清空文本框内容
- Android 自定义EditText 实现获得焦点并且有内容显示右侧图片并点击清空内容
- 文本框获得焦点时,内容为空!
- 文本框提示样式,鼠标点击获得焦点时提示内容消失
- JavaScript基础 text文本框获得焦点时,其中的内容被全选 this.select()