判斷瀏覽器是否支援placeholder屬性
阿新 • • 發佈:2018-12-04
//判斷瀏覽器是否支援placeholder屬性
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}
如果支援,返回true,否認在false;
運用:
// 如果不支援placeholder,用jQuery來完成 if(!isSupportPlaceholder()) { // 遍歷所有input物件, 除了密碼框 $('input').not("input[type='password']").each(function() { var self = $(this); var val = self.attr("placeholder"); input(self, val); } ); /** * 對password框的特殊處理 * 1.建立一個text框 * 2.獲取焦點和失去焦點的時候切換 */ $('input[type="password"]').each( function() { var pwdField = $(this); var pwdVal = pwdField.attr('placeholder'); var pwdId = pwdField.attr('id'); // 重新命名該input的id為原id後跟1 pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />'); var pwdPlaceholder = $('#' + pwdId + '1'); pwdPlaceholder.show(); pwdField.hide(); pwdPlaceholder.focus(function(){ pwdPlaceholder.hide(); pwdField.show(); pwdField.focus(); }); pwdField.blur(function(){ if(!pwdField.val()) { pwdPlaceholder.show(); pwdField.hide(); } }); } ); }