关于 文本框默认值 的操作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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
jquery实现用户打分评分特效
May 28 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
javascript常用函数(1)
Nov 04 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
微信小程序实现搜索历史功能
Mar 26 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
通过文字传递创建的图形按钮
2006/10/09 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
学习php分页代码实例
2013/10/24 PHP
动态加载iframe
2006/06/16 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
js实现密码强度检验
2017/01/15 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python pass详细介绍及实例代码
2016/11/24 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
500行python代码实现飞机大战
2020/04/24 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
学校后勤人员职责
2013/12/27 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
技能比武方案
2014/05/21 职场文书
英文道歉信
2015/01/20 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
商业计划书之服装
2019/09/09 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js