关于 文本框默认值 的操作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 相关文章推荐
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 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
php缓冲输出实例分析
2015/01/05 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
js判断是否是手机页面
2017/03/17 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
如何更优雅地写python代码
2019/07/02 Python
python进阶之自定义可迭代的类
2019/08/20 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
同学会主持词
2014/03/18 职场文书
大学生心理活动总结
2014/07/04 职场文书
保证书格式
2015/01/16 职场文书
公司承诺书格式范文
2015/04/28 职场文书
道歉的话语大全
2015/05/12 职场文书
2016年小学生寒假总结
2015/10/10 职场文书