关于 文本框默认值 的操作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通过Ajax提交表单并返回结果
Jul 31 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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
ThinkPHP安装和设置
2015/07/27 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
python中zip()方法应用实例分析
2016/04/16 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python实现简单爬虫功能的示例
2016/10/24 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
毕业生应聘求职信
2014/07/10 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
素质教育培训心得体会
2016/01/19 职场文书
初中生物教学反思
2016/02/20 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers