关于 文本框默认值 的操作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中Object和Function的关系小结
Sep 26 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
小程序外卖订单界面的示例代码
Dec 30 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
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python判断设备是否联网的方法
2018/06/29 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
外语系毕业生找工作的求职信
2013/11/28 职场文书
安全生产先进个人材料
2014/02/06 职场文书
商场中秋节活动方案
2014/02/07 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
党员个人整改措施
2014/10/24 职场文书
2014年超市工作总结
2014/11/19 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
JS的深浅复制详细
2021/10/16 Javascript
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫