关于 文本框默认值 的操作js代码


Posted in Javascript onJanuary 12, 2012

比如:
搜索框:可以 <input value="搜索产品..." />
文本区域: 可以 <textarea>输入您多我的建议或者意见,让我们的网站为您创造更便捷的服务....</textarea>
........
首先说这种提示功能很好,非常直观,可是怎么让它们获取焦点时内容清空、失去焦点后内容分为空的话就显示提示文本.....
当页面这些元素多了之后如何去管理...等等问题

var inputText=function(o,e,e2){ 
if(!o)return;var txt=o.value; 
function inputTextChange(o,e,e2,txt){ 
o[e]=function(){var txt2=o.value;if(txt==txt2)o.value=""} 
o[e2]=function(){var txt2=o.value;if(txt2=="")o.value=txt} 
} 
new inputTextChange(o,e,e2,txt) 
}

上面我定义了一个函数
功能讲解:
参数 [o] : 需要操作的对象
参数 [e] : 需要清空对象值的事件
参数 [e2] : 需要返回默认值的事件
函数调用:
inputText(userName,"onmouseover","onmouseout");
函数应用示例:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>input.value</title> 
</head><body> 
<script> 
var inputText=function(o,e,e2){if(!o)return;var txt=o.value; 
function inputTextChange(o,e,e2,txt){ 
o[e]=function(){var txt2=o.value;if(txt==txt2)o.value=""} 
o[e2]=function(){var txt2=o.value;if(txt2=="")o.value=txt}} 
new inputTextChange(o,e,e2,txt) 
} 
</script> 
<input type="text" value="请输入您的邮箱..." on /> 
<input type="text" value="请输入您的家庭住址..." /> 
<input type="text" value="请输入您的手机号..." /> 
<script> 
var inputArr=document.getElementsByTagName("input") 
for(var i in inputArr){ 
if(!inputArr[i].type=="text") continue; 
inputText(inputArr[i],"onfocus","onblur") 
} 
</script> 
</body></html>
Javascript 相关文章推荐
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 #Javascript
JS读取cookies信息(记录用户名)
Jan 10 #Javascript
判断对象是否Window的实现代码
Jan 10 #Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 #Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 #Javascript
jQuery 阴影插件代码分享
Jan 09 #Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 #Javascript
You might like
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
解析php中const与define的应用区别
2013/06/18 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
prototype 的说明 js类
2006/09/07 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
实例浅析js的this
2016/12/11 Javascript
javascript表单正则应用
2017/02/04 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
Python中的高级数据结构详解
2015/03/27 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
Python3分析处理声音数据的例子
2019/08/27 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
静态变量和实例变量的区别
2015/07/07 面试题
毕业学生推荐信
2013/12/01 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
搞笑创意广告语
2014/03/17 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
保险专业求职信
2014/07/07 职场文书
社区灵活就业证明
2014/11/03 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
化工生产实习心得体会
2016/01/22 职场文书