1. 程式人生 > >判斷瀏覽器是否支援placeholder屬性

判斷瀏覽器是否支援placeholder屬性

//判斷瀏覽器是否支援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();
	                    }
	                });
	            }
	        );
	    }