关于 文本框默认值 的操作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数据缓存用法分析
Feb 20 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 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 网上商城促销设计实例代码
2012/02/17 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
JavaScript 的继承
2011/10/01 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python连接字符串过程详解
2020/01/06 Python
tensorflow 查看梯度方式
2020/02/04 Python
几款好用的python工具库(小结)
2020/10/20 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
幼儿园教师培训方案
2014/02/04 职场文书
高中生社会实践心得体会
2016/01/14 职场文书