change "input type" from text to password

我們在製作版面時對方可能會要求我們的input password會先在欄位內給個輸入的引導文字

，如此讓user能夠知道要針對這個input輸入啥東西，通常這是旁邊沒有說明文字時。

如下圖：

 此時，當您focus進Enter Password欄位內時，就必須改變其type屬性，但是type屬性是不允許

 更改的(會報error)，因此可能需要remove掉這個DOM元件，而且還必須在remove掉時，將原

 本元件的id , class等value setAttribute進新的元件內，請見下面的JavaScript code

function replaceT(obj){
   if (obj.value == 'Enter Password') {
      obj.value = '';
   }
   var newO=document.createElement('input');
   newO.setAttribute('type','password');
   newO.setAttribute('onblur',"restoreT(this)");
   newO.setAttribute('style',"color:#000000");
   newO.setAttribute('id',obj.getAttribute('id'));
   newO.setAttribute('class',obj.getAttribute('class'));
   obj.parentNode.replaceChild(newO,obj);
   newO.focus();
}
   
function restoreT(obj){
   if (obj.value == '') {
       var newO=document.createElement('input');
       newO.value = 'Enter Password';
       newO.setAttribute('type','text');
       newO.setAttribute('onfocus',"replaceT(this)");
       newO.setAttribute('style',"color:#c9c8c8");
       newO.setAttribute('id',obj.getAttribute('id'));
       newO.setAttribute('class',obj.getAttribute('class'));
       obj.parentNode.replaceChild(newO,obj);
       newO.blur();    
   }
}

您可以看到，我們自訂了兩個function，當focus進帶有文字的元件時會呼叫replaceT，此時

在remove掉原本的text元件時，先將所有的屬性set進新的元件內，之後再remove掉；同理

當blur時，會呼叫restoreT，以此類推。

當初在找尋change type的部分時，意外看到國外的論壇有討論此事，就此分享給大家這個作

法，但我想應該很少網站的輸入機制會這麼囉唆吧囧，當初看到要這麼做有點傻眼orz...