兼容ie7以上的 placeholder属性

最近项目踩过的坑，不考虑ie的可以拐弯绕路走了。

css3的新属性占位符 placeholder用着多舒服。

偏偏万恶的ie不支持，网上有几种方法是用焦点事件代替的，不过会失去原有的特性。一旦获取焦点或者失去焦点占位符的文字就会消失。

而placeholder是在输入文字时占位符的文字才会消失

强调一点，此方法只针对 input[type='text']，其他的不支持，比如passwrod

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://s28.9956.cn/static/v3_1/js/jquery.min.js"></script>
</head>
<body>
<input type="" class="clo1" placeholder="电话">
<script type="text/javascript">//'代码保存成一个js文件引用即可。
            $(document).ready(function() {
var doc = document,
                inputs = doc.getElementsByTagName('input'),
                supportPlaceholder = 'placeholder' in doc.createElement('input'),

                placeholder = function(input) {
var text = input.getAttribute('placeholder'),
                    defaultValue = input.defaultValue;
if (defaultValue == '') {
                        input.value = text
                    }
                    input.onfocus = function() {
if (input.value === text) {
this.value = ''
                        }
                    };
                    input.onblur = function() {
if (input.value === '') {
this.value = text
                        }
                    }
                };

if (!supportPlaceholder) {
for (var i = 0,
                    len = inputs.length; i < len; i++) {
var input = inputs[i],
                        text = input.getAttribute('placeholder');
if (input.type === 'text' && text) {
                            placeholder(input)
                        }
                    }
                }
            });
</script>
</body>
</html>

再列举一个支持passwrod的方法，比较猥琐，用一个label标签把input包起来，里面在加一个标签代替placeholder的文字

先做个样式，定位起来

<style type="text/css">
    label{position: relative;}
    label p{position: absolute;left: 5px;top:0px;margin: 0;padding: 0;}
</style>

<label>
<input onfocus="$(this).siblings('p').hide();" onblur="if($(this).val()==''){$(this).siblings('p').show();}" type="password" class="psw">
<p style="display: block;">请输入密码</p>
</label>

上面用的js方法写的，写到标签里的，大家喜欢jquery的写法的话，请看下面代码

<script type="text/javascript">
    $(".psw").focus(function(){
        $("p").hide();
    });
    $(".psw").blur(function(){
        $("p").show();
    });
</script>

秒客网

兼容ie7以上的 placeholder属性

相关文章