Question

所以我知道在IE10之前IE不支持HTML5 placeholder属性，但我真的需要这个功能。

我认为我可以执行以下操作，但它似乎不起作用（看起来.focus和.blur方法没有被解雇...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function() {

        function isPlaceholderSupported() {
            var input = document.createElement('input');
            return ('placeholder' in input);
        }

        var placeholderSupport = isPlaceholderSupported();

        if (placeholderSupport == false) {
            $('#store_name').val('Store Name');
        }

        $('#store_name').focus(function() {
            if (placeholderSupport == false) {
                if ($(this).val() == 'Store Name') {
                    $(this).val('');
                }
            }
        });

        $('#store_name').blur(function() {
            if (placeholderSupport == false) {
                if ($(this).val() == '') {
                    $(this).val('Store Name');
                }
            }
        });
    });
</script>

<input type="text" name="store_name" id="store_name" placeholder="Store Name" />

我在这里的逻辑中看不到任何缺陷，但这只是不起作用。 Chrome的开发工具中没有报告错误，我还没有在IE9中尝试过。

任何帮助将不胜感激！

Answer 1

<input id="email" type="text"/>

 /*placeholder*/
function initPlaceHolder(input, defaultValue) {
    input.onfocus = function() {
                    if (input.value == defaultValue){
                      input.value = "";
                      input.style.color = '#444444';
                    }
                  };

    function remove() {
        if (input.value == "") {
          input.value = defaultValue;
          input.style.color = '#c9c9c9';              
        }
    }
    input.onblur = remove;
    remove();
}
window.onload = function(){
    initPlaceHolder(document.getElementById("email"), "Enter your Email");
};

Answer 2

/*For placeholder*/ 
function ClearPlaceHolder(input) {      
    if (input.value == input.defaultValue){
        input.value = "";
        document.getElementById(input.id).style.color = '#444444';
    }
}

function SetPlaceHolder (input) {
   if (input.value == "") {
        input.value = input.defaultValue;
        document.getElementById(input.id).style.color = '#c9c9c9';              
    }
}

Answer 3

为什么不使用像http://archive.plugins.jquery.com/project/jq-watermark这样的现有插件？

Answer 4

/* <![CDATA[ */
$(function() {
var input = document.createElement("input");
if(('placeholder' in input)==false) { 
    $('[placeholder]').focus(function() {
        var i = $(this);
        if(i.val() == i.attr('placeholder')) {
            i.val('').removeClass('placeholder');
            if(i.hasClass('password')) {
                i.removeClass('password');
                this.type='password';
            }           
        }
    }).blur(function() {
        var i = $(this);    
        if(i.val() == '' || i.val() == i.attr('placeholder')) {
            if(this.type=='password') {
                i.addClass('password');
                this.type='text';
            }
            i.addClass('placeholder').val(i.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder'))
                i.val('');
        })
    });
}
});
/* ]]> */

试试这个..

Answer 5

您可以将此方法用于支持IE9 +的占位符

$('[placeholder]').focus(function () {
    var input = $(this);
    if(input.attr('data-password') == 'password') {
        input.attr('type','password');
        input.attr('data-password','text');
    }
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
        if(input.attr('type') == 'password') {
            input.attr('type','text');
            input.attr('data-password','password');
        }
    }
}).blur(function () {
    var input = $(this);
    if(input.attr('data-password') == 'password') {
        input.attr('type','password');
        input.attr('data-password','text');
    }
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
        if(input.attr('type') == 'password') {
            input.attr('type','text');
            input.attr('data-password','password');
        }
    }
}).keyup(function () {
    var input = $(this);
    if(input.attr('data-password') == 'password') {
        input.attr('type','password');
        input.attr('data-password','text');
    }
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        if(input.attr('type') == 'password') {
            input.attr('type','text');
            input.attr('data-password','password');
        }
    }
}).blur();

Answer 6

仅针对IE

检查以下jQuery

    $(function() {
       var textBox = $('input[type="text"]');
       textBox.each(function() {
        var self = $(this);
        self.val(self.attr('placeholder'));
       });
    });
    $(document).on('focus', textBox, function() {
        var self = $(this);
       if(self.val() == self.attr('placeholder')) {
           self.val('');
       }
    });
    $(document).on('blur', textBox, function() {
        var self = $(this);
        if(self.val() == '') {
            self.val(self.attr('placeholder'));
        }
    });

文本输入占位符和跨浏览器支持

6 个答案: