关于 文本框默认值 的操作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 相关文章推荐
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
vue代码分割的实现(codesplit)
Nov 13 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中实现记住密码下次自动登录的例子
2014/11/06 PHP
PHP常用技巧汇总
2016/03/04 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
安全责任书范本
2014/04/15 职场文书
企业员工薪酬方案
2014/06/04 职场文书
护理专业自荐书
2014/06/04 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js