首页 > 代码库 > 使用jQuery制作input提示内容，兼容IE8以上

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

2024-10-17 03:30:39   211人阅读

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

首先HTML新建一个input

<input type="text" class="input" value="http://www.mamicode.com/请输入搜索内容" />

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

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

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


联系
我们