使用jQuery制作input提示内容,兼容IE8以上

我们都知道HTML5的input新属性有 placeholder="",那么这个不兼容IE低版本我们只能用脚本来写了。

首先HTML新建一个input

<input type="text" class="input" value="请输入搜索内容" />

然后我们再引入相应的js库,再使用jQuery

 1    <script src="js/jquery-1.8.3.min.js"></script>
 2     <script>
 3         $(".input").bind({
 4             focus:function(){
 5                 if (this.value == this.defaultValue){
 6                     this.value="";
 7                 }
 8             },
 9             blur:function(){
10                 if (this.value == ""){
11                     this.value = this.defaultValue;
12                 }
13             }
14         });
15     </script>

简单吧,这样就可以了,那么这个是input的属性是text,我们要密码password也一样可以显示IE低版本,我们用的方法就是用两个input,一个text默认显示,一个password默认隐藏,当text获取焦点时password显示,text隐藏,没有输入内容失去焦点text显示,password显示,好了,废话不多说,看代码!

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>密码框提示</title>
 6 </head>
 7 <body>
 8
 9     <input type="text" value="登录密码" class="show" >
10     <input type="password" class="log_paw" style="display: none;">
11
12
13     <script src="js/jquery-1.8.3.min.js"></script>
14     <script>
15         $(‘.show‘).focus(function(){
16             var text_value = $(this).val();
17             if (text_value == this.defaultValue) {
18                 $(this).hide();
19                 $(this).next(‘input.log_paw‘).show().focus();
20             }
21         });
22         $(‘input.log_paw‘).blur(function() {
23             var text_value = $(this).val();
24             if (text_value == ‘‘) {
25                 $(this).prev(‘.show‘).show();
26                 $(this).hide();
27             }
28         });
29     </script>
30 </body>
31 </html>

好了,代码就在这里了,希望能帮助到你!

时间: 2024-10-21 04:43:00

使用jQuery制作input提示内容,兼容IE8以上的相关文章

jQuery制作信息提示弹出层插件【推荐】

给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.?1. [代码][JavaScript]代码 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><!--[if IE 6]><script type="text/javascript" src="js/iepngfix_tilebg

兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理

当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.appName == "Microsoft Internet Explorer" && (navigator.appVersion.match(/7./i)=="7." || navigator.appVersion.match(/8./i)=="

jQuery ajax 动态append创建表格出现不兼容ie8

很多情况下,通过js(jQuery1.10)动态来创建一些样式,对页面的动态交互来说是很方便的 但是不同的浏览器针对动态生成的不是很兼容,在此遇见的不兼容ie8,跟各位分享下 代码: json数据 data.json [{"name":"ajax","job":"manong"},{"name":"js","job":"diaosi"}] html

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(docum

CSS3结合jQuery制作的冒泡工具图片提示效果

一款基于CSS3技术的冒泡提示效果,为了演示效果,生成了许多冒泡的提示,实际使用中,可能不需要这么多,结合jQuery和jquery UI共同实现的网页提示特效,挺不错.因CSS不支持IE8及以下低版本,所以请使用IE9.chrome或火狐测试. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

jQuery validate兼容IE8写法

最近做项目的时候遇到一个validate插件在IE8下面点击submit按钮没有执行检查的BUG 在chrome和FF,还有IE9以上都可以.百度了好多文章都没有找到解决方法,后面自己测试找到了问题. 在IE8下面点击 input type=submit 的按钮,不能触发检测.换一种实现方式就可以了. // 兼容IE8写法: $('#login-btn').click(function(){ $('#loginForm').submit(); }); 我们不用默认的submit input按钮,

ICG-智能代码生成器.(权限控制.融入平台).(表单引擎).(最低兼容IE8)

请下拉滚动条... 界面: 1--首先是server制作界面(BS结构).直接上图:   2--点击提交生成一下文件: 各个代表什么一看就懂了...... 3--把上面的文件放到对于的位置.然后编译.然后就ok了.... 打开client中的IBD中的loginin.aspx页面 用admin登陆.(admin未管理员.test为普通用户.这些在平台都可以设置) 登陆进来是这样:其中邮件和分组管理还有用户管理以及app管理都是平台自带的....看下图: 4--现在把刚才生成的app应用加入到平台

【Bootstrap】兼容IE8、谷歌和其他主流浏览器的观众IMAX风格的页面

尽管说IE6除了苛刻要求的一部分,我们一直没能考虑,但WIN7内置的浏览器IE8还需要支持. 在本文中,基本这种方法的优点,我个人认为,这是准备少.我们不需要在网上找了很多照片,使材料,你只要准备好了bootstrap.jquery与photoshop在上面.bootstrap与jquery怎么配置.能够參考<[Bootstrap]一个在当前网页弹出的对话框,能够关闭.不用跳转.非弹窗>(点击打开链接) 被要求编写一个站点,经常会被怎样布局困扰. 事实上也不难.假设可以熟练使用Bootstra

【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众巨幕式风格页面

虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了,但是WIN7自带的浏览器IE8还是需要支持的. 本文这个方法主要的优点,个人觉得就是准备少,不需要上网寻找大量的图片做素材,你只要准备好一个bootstrap.jquery与photoshop就可以了,bootstrap与jquery怎么配置,可以参考<[Bootstrap]一个在当前网页弹出的对话框,可以关闭,不用跳转,非弹窗>(点击打开链接) 被要求编写一个网站,常常会被如何布局困扰, 其实也不难,如果能够熟练使用Bootstrap