js操作输入框提示信息且响应鼠标事件


Posted in Javascript onMarch 25, 2014

我们经常遇到一些输入框,比如注册网站的输入框就有默认提示值,当获取鼠标焦点的时候,默认值被删除,当用户没输入东西焦点离开的时候,又恢复默认提示值。这方法用js代码实现如下:

html代码:

<input type="text" id="email" name="email" class="txt_input" value="请输入经常使用的邮箱" onfocus="fn_focus(this);" onblur="fn_blur(this);"/>

js代码:
function fn_focus(ele){ 
if(ele.value == ele.defaultValue){ 
ele.value = ''; 
} 
} 
function fn_blur(ele){ 
var reg = /^[\s]*$/; 
if(reg.test(ele.value) || ele.value == ele.defaultValue){ 
ele.value = ele.defaultValue; 
} 
}
Javascript 相关文章推荐
jQuery获得内容和属性示例代码
Jan 16 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
jquery动态更换设置背景图的方法
Mar 25 #Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 #Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 #Javascript
jquery的each方法使用示例分享
Mar 25 #Javascript
提取jquery的ready()方法单独使用示例
Mar 25 #Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 #Javascript
jquery解析xml字符串示例分享
Mar 25 #Javascript
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
菜单效果
2006/10/14 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
解读Django框架中的低层次缓存API
2015/07/24 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
python一键升级所有pip package的方法
2017/01/16 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
2014年乡镇民政工作总结
2014/12/02 职场文书
经验交流材料格式
2014/12/30 职场文书
中学推普周活动总结
2015/05/07 职场文书
离婚代理词范文
2015/05/23 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
详解pytorch创建tensor函数
2022/03/22 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL