关于 文本框默认值 的操作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 prototype,executing,context,closure
Dec 24 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
js实现简单贪吃蛇游戏
May 15 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
node.js调用C++开发的模块实例
2015/07/03 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python程序输出无内容的解决方式
2020/04/09 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
环保建议书600字
2014/05/14 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
家长会主持词开场白
2015/05/29 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
投诉书格式范本
2015/07/02 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android