安裝文本框輸入的地方持有人[type =「密碼」]

我想顯示輸入[type =「password」]的文本框的佔位符文本（輸入密碼）。現在我試圖改變input [type =「password」] to input [type =「text」]來顯示佔位符，如果用戶點擊文本框我再次改變input [type = 「text」]至input [type =「password」]。這不工作請檢查腳本
我jsfiddle is here安裝文本框輸入的地方持有人[type =「密碼」]

function setupPasswordPlaceholder(thisEl) 
    { 
     if('' !== thisEl.attr("alt")) 
     { 
      if('' === thisEl.val()) 
      { 
       thisEl.val(thisEl.attr("alt")); 
       thisEl.removeAttr("type"); 
       thisEl.attr('type','text'); 
       thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'}); 
      } 
      thisEl.focus(function() 
      {   
       if(thisEl.val() == thisEl.attr("alt")) 
       { 
        thisEl.val(""); 
        thisEl.removeAttr("type"); 
        thisEl.attr('type','password'); 
        thisEl.css({'color': '#18A505','font-size': '10pt','font-weight':'normal'}); 
       } 

     }); 

     thisEl.focusout(function() 
     {   
      if('' === thisEl.val()) 
      { 
       thisEl.val(thisEl.attr("alt")); 
       thisEl.removeAttr("type"); 
       thisEl.attr('type','text'); 
       thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'}); 
      } 
     }); 
    } 
} 



$("input[type='password']").each(function(){ 
     setupPasswordPlaceholder($(this)); 
});

來源

2012-12-21 Suresh Pattu

HTML5爲輸入框添加了一個佔位符屬性。這不適合你嗎？ '''' –

對不起，我正在使用html4，在這裏沒有選項，ie6，ie7不支持html5 –

DOM不是很友好當試圖更改輸入元素的類型屬性時。我最後一次使用它時，只有在從DOM中分離元素，更改屬性並重新附加屬性時才成功。這是一個黑客最好的。 –

一個簡單的代碼更改爲您可能會在大多數瀏覽器工作（除IE6其他ofcourse）。您正在使用removeAttr然後設置屬性 '類型' 的Attr，而不是用這個單行：

取代：

thisEl.removeAttr("type"); 
    thisEl.attr('type','text');

有：

thisEl.get(0).type = type;

看到更新後的提琴http://jsfiddle.net/9HagB/7/

來源

2012-12-21 05:53:46 closure

這裏是一個Fiddle

HTML：

<input style="display: none; " id="fakepasscode" type="password" autocomplete="off"> 
    <input style="display: inline;" id="passcode" hint="password" type="text" autocomplete="off">

的JavaScript：

var clearField = function() { 
    if ($("#passcode").val() != "password") { 
     $("#passcode").val(""); 
    } 
} 

var resetField = function() { 
    if ($("#passcode").val().length == 0) $("#passcode").val("password"); 
} 


var pwdFocus = function() { 
    $("#passcode").hide(); 
    $("#fakepasscode").val(""); 
    $("#fakepasscode").show(); 
    $("#fakepasscode").focus(); 
} 

var pwdBlur = function() { 
    if ($("#fakepasscode").val() == "") { 
     $("#fakepasscode").hide(); 
     $("#passcode").show(); 
    } 
} 

var setupHintField = function() { 
    $("#passcode").unbind("focus blur change"); 
    $("#passcode").focus(function() { 
     clearField(); 
    }); 
    $("#passcode").blur(function() { 
     resetField(); 
    }); 
    $("#passcode").change(function() { 
     resetField(); 
    }); 
    $("#passcode").show(); 
    $("#fakepasscode").hide(); 
} 


$(document).ready(function() { 
    $("#passcode").val($("#passcode").attr("hint")); 
    setupHintField(); 
    $("#passcode").unbind("focus"); 
    $("#passcode").focus(function() { 
     pwdFocus(); 
    }); 
    $("#fakepasscode").blur(function() { 
     pwdBlur(); 
    }); 
});

來源

2012-12-21 04:57:45

共同解決這個我所看到的是使用一個標籤或其他輸入框來顯示在IE的「佔位符」文本。

請參閱本出色答卷：https://stackoverflow.com/a/7225820/988355

來源

2012-12-21 05:01:51

安裝文本框輸入的地方持有人[type =「密碼」]

回答

相關問題