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

2021-07-04 09:07

阅读:681

标签:ext   script   code   .sh   next   inpu   ace   新建   html   

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

首先HTML新建一个input

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

 1    
 2     

简单吧,这样就可以了,那么这个是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>

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

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

标签:ext   script   code   .sh   next   inpu   ace   新建   html   

原文地址:http://www.cnblogs.com/ping228/p/7120421.html


评论


亲,登录后才可以留言!