jQuery制作input提示内容(兼容IE8以上)
我们都知道HTML5的input新属性有 placeholder="",那么这个不兼容IE低版本我们只能用脚本来写了。
首先HTML新建一个input
<input type="text" class="input" value="请输入搜索内容" />
然后我们再引入相应的js库,再使用jQuery
<script src="js/jquery-1.8.3.min.js"></script> <script> $(".input").bind({ focus:function(){ if (this.value == this.defaultValue){ this.value=""; } }, blur:function(){ if (this.value == ""){ this.value = this.defaultValue; } } }); </script>
简单吧,这样就可以了,那么这个是input的属性是text,我们要密码password也一样可以显示IE低版本,我们用的方法就是用两个input,一个text默认显示,一个password默认隐藏,当text获取焦点时password显示,text隐藏,没有输入内容失去焦点text显示,password显示,好了,废话不多说,看代码!
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>密码框提示</title> </head> <body> <input type="text" value="登录密码" class="show" > <input type="password" class="log_paw" style="display: none;"> <script src="js/jquery-1.8.3.min.js"></script> <script> $('.show').focus(function(){ var text_value = $(this).val(); if (text_value == this.defaultValue) { $(this).hide(); $(this).next('input.log_paw').show().focus(); } }); $('input.log_paw').blur(function() { var text_value = $(this).val(); if (text_value == '') { $(this).prev('.show').show(); $(this).hide(); } }); </script> </body> </html>
(资源库 www.zyku.net)
您可能感兴趣的文章
- 06-26jquery 显示隐藏input输入框
- 05-05IE11浏览器下测试IE10、IE9、IE8、IE7网页兼容性
- 03-31JS解决移动web开发手机输入框弹出的问题
- 01-13Dedecms提示信息及提示内容的修改方法
- 04-24Radio选项选中触发事件弹出输入框效果
- 02-12opporeno5息屏时钟设置教程
- 07-05Linux ping命令
- 02-17帝国CMS-识别帝国CMS版本插件下载
- 02-19宿主机不能访问虚拟机CentOS中的web站
- 10-12畅联消息通知如何开启
- 10-30iOS15.2隐私报告有什么用
- 06-18帝国CMS7.5版动态页新增缓存,让动态模
- 12-07鸿蒙系统添加相册到首页教程一览
- 03-09荣耀50pro关机方法汇总
- 10-31MySQL常用数据库备份与恢复操作方法
- 03-30小米wifi自动备份路由器设置启用方法
- 12-26凯越瑜伽-凯越瑜伽应用软件功能介绍
- 03-04wordpress特定文章列表调用的方法
- 02-27华为nova8开启网络加速操作方法
- 03-03opporeno6设置息屏样式方法
最近更新
阅读排行
猜你喜欢
- 01-12我要个性-我要个性应用软件功能介绍
- 12-18HTML5 <progress> 标签
- 02-22DedeCMS首页调用文章正文内容的sql万
- 09-15网易云音乐一起听和好友对话教程介绍
- 09-26华为p30怎么设置开发者选项
- 09-12支付宝哪里可以查看开学标签
- 12-13红魔游戏手机6S怎么设置游戏空间
- 04-13oppofindx3启用5G网络操作方法
- 01-19微信双头像制作app-微信双头像制作app
- 01-18百度百万英雄dan答题-百度百万英雄dan