关于 文本框默认值 的操作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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python Tkinter的图片刷新实例
2019/06/14 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
档案接收函
2014/01/13 职场文书
工作态度检讨书
2014/02/11 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
2014年元旦感言
2014/03/06 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
银行职员自我鉴定
2014/04/20 职场文书
空气的环保标语
2014/06/12 职场文书
学校欢迎标语
2014/06/18 职场文书
超级礼物观后感
2015/06/15 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python