关于 文本框默认值 的操作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 相关文章推荐
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
新发现一个骗链接的方法(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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
js实现简单进度条效果
2020/03/25 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Python引用计数操作示例
2018/08/23 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
开工仪式主持词
2014/03/20 职场文书
服务承诺口号
2014/05/22 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
护士2015年终工作总结
2015/04/29 职场文书