placeholderフォントスタイルと互換性

1530 ワード

    css
::-webkit-input-placeholder { /* WebKit browsers */ color: #fff!important;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff!important;}
::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff!important;}
:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #fff!important;}


//             placeholder
var isPlaceholderSupport = (function(){
return 'placeholder' in document.createElement('input');
})();
if(!isPlaceholderSupport){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}

転載先:https://www.cnblogs.com/zyxing/p/7920505.html