placeholder字体样式及兼容

it2022-05-05  160

样式修改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;}兼容方法 // 判断浏览器是否支持placeholdervar 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


最新回复(0)