关于 文本框默认值 的操作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之通用简单的table选项卡实现(二)
May 09 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
electron中使用bootstrap的示例代码
Nov 06 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
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python 多线程的实例详解
2017/09/07 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python列表使用实现名字管理系统
2019/01/30 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
软件测试题目
2013/02/27 面试题
总裁助理岗位职责
2014/02/17 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
MySQL日期时间函数知识汇总
2022/03/17 MySQL