关于 文本框默认值 的操作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 相关文章推荐
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
vue实现动态数据绑定
Apr 28 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
js实现上传并压缩图片效果
Jan 10 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 编写的 25个游戏脚本
2009/05/11 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
办公室经理岗位职责
2014/01/01 职场文书
火车来了教学反思
2014/02/11 职场文书
学校后勤岗位职责
2014/02/19 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
python 详解turtle画爱心代码
2022/02/15 Python