1

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

我以为我可以做以下事情，但它似乎不起作用（看起来.focusand.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 中尝试过。

任何帮助将不胜感激！

4

6 回答 6

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");
};
于 2012-11-25T16:50:33.757 回答
0 
/*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';              
    }
}
于 2012-11-24T13:37:44.013 回答
0

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

于 2012-11-24T13:52:25.693 回答
0 
/* <![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('');
        })
    });
}
});
/* ]]> */

试试这个。。

于 2013-05-04T15:10:16.953 回答
0

您可以将此方法用于支持 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();
于 2013-12-10T10:30:31.857 回答
-1

检查下面的 jQuery 仅适用于 IE

    $(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'));
        }
    });
于 2012-11-16T12:48:02.183 回答