IE、谷歌、火狐瀏覽器相容性、預設屬性樣式總結
阿新 • • 發佈:2019-01-02
IE
1、去掉input框中自動新增的 X 和 眼睛圖示
情境:在 IE 瀏覽器下的 input 框中,輸入內容時:
1、 type = text 會自動生成一個 X。
2、 type = password 會自動生成一個眼睛的圖示。
解決:有時為了保證瀏覽器之間的一致性,就需要將這個樣式取消掉
// 去掉IE input X 和 眼睛圖示
input::-ms-clear,::-ms-reveal{
display: none;
}
2、placeholder在 IE9 以下不相容
解決:
可以將下面的程式碼封裝到一個方法或者一個placeholder.js中單獨引入。
// 相容ie9的placeholder
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
}
if (!isPlaceholder()) {//不支援placeholder 用jquery來完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']" ).each(//把input繫結事件 排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if ($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
//對password框的特殊處理1.建立一個text框 2獲取焦點和失去焦點的時候切換
$("input[type='password']").each(
function() {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input class="login-input" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $(this).siblings('.login-input');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
});
}
});
}
看了以下大概是這樣的:
1、 對於type = text的input框,是利用jquery新增placeholder屬性。
2、 對於type = password的input 框,新增一個input type = text的輸入框,為其新增屬性placeholder,在對這兩個框做隱藏、顯示操作。
Chrome
1、去掉谷歌瀏覽器中表單 input 框中的黃色背景,以及自動填充 user 和 password。
情境:
解決:
1、去掉黃色背景:
input:-webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ;
border : 1px solid #CCC !important ;
}
2、去掉自動填充:假密碼框 和 真密碼框 區分
<!--新增一樣的假input密碼框-->
<input id='passwordTxt' name="userPassword" type="text" class="checkpass required"/>
<!--真input密碼框-->
<input id='password' name="userPassword" type="password" class="checkpass required" style="display: none" readonly="true"/>
新增一個同樣的 input 作預設顯示,type 為 text,這樣出來的時候就不會有預設填充了。正真的 input 密碼框則預設顯示 display:none
,並且 readonly="true"
設定只讀模式。id 需要不同,需要 js 找到對應 dom 作操作。
新增js
$(function() {
//假密碼框獲得焦點後,呼叫函式
$("#passwordTxt").on('focus', function () {
//假密碼框隱藏
$(this).hide();
//真密碼框顯示,並且去掉只讀,自動獲得焦點
$('#password').show().attr('readonly', false).focus();
});
});