存档

文章标签 ‘input’

input标签获取焦点时文本框内提示信息清空(2)

2009年1月6日 9 条评论

  昨天,我发了一个input标签清空的日志,冰雪黑鹰说我的那个还不是很标准的,帮我重写了一个,现在的看着也简洁,而且也符合哪些什么标准,特别在这里感谢下。附上代码,以备后用……

js部分:

function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}
 
function checkText(){
	var textId = document.getElementById('test');
	var textDefault = '请输入字符';
	function cls(){
		if (this.value == textDefault){
			this.value = '';
		}
	}
	function res(){
		if (this.value == ''){
			this.value = textDefault;
		}
	}
	textId.onfocus = cls;
	textId.onblur = res;
}
addLoadEvent (checkText);

html部分:

<input type="text" value="请输入字符" id="test" />
分类: 网络技术 标签: , , ,

input标签获取焦点时文本框内提示信息清空

2009年1月4日 13 条评论

  刚才荆棘鸟在群里讨论他的标签是否符合w3c的标准,贴上来一段代码,作用是,一个文本框,需要输入内容,在没有输入的时候里面有一段提示内容,当点击这个文本框输入的时候,文本框内的内容自动消失。挺简单的一个功能,但是没有想到实现起来还是很麻烦的,在网上找了一段代码,贴上来以备后用。

  好像html里面加上这样的js代码就不符合标准了……不过标准是死的,人是活得,不一定处处都符合标准。

  来源:闪吧

  解决思路:当需要填写的文本框很多时,在每个文本框内写上提示信息是个不错的办法,但这样一来用户在填写该项时必须先把提示文本删掉,非常不方便。所以应该让文本框更人性化一点,在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()">

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

  特别提示:运行完整代码,在鼠标第一次单击文本框时该文本框内容将被清空,在文本框外单击时文本框内容将还原回默认值。如果改变了文本框的值,将不再有任何变化。

分类: xhtml&css 标签: ,