在javascript中切換標籤元素

大家好我最近問了this question，我已經放棄了'替換輸入的想法'。相反，我決定嘗試另一種方法..在javascript中切換標籤元素

我已將密碼字段背景設置爲透明，並且我將<label>元素放置在密碼輸入的「後面」，以便它看起來是密碼字段的一部分。現在，我寫了一個標準功能爲這樣的切換元素：

function togglePassword(obj) { 
        var el = document.getElementById(obj); 
        if (el.style.display != 'none') { 
         el.style.display = 'none'; 
        } 
        else { 
         el.style.display = ''; 
        } 
       }

我觸發從密碼字段此功能onforus和的onblur因此當密碼字段爲焦點標籤消失，但我有一個的onblur問題，因爲畢竟我型密碼，然後按下TAB鍵，我需要登錄提交按鈕，然後<label>元素再次顯示密碼值，並與密碼混合。 image http://i49.tinypic.com/23s7ypc.png這是這個圖像，所以我試圖想出一些新的東西。

function togglePassword(obj) { 
       var el = document.getElementById(obj); 
         var input_el = document.getElementById('password_field'); 
        if(input_el.value.length > 0) 
          { 
           el.style.display = 'none'; 
          } 
          else { 
           if (el.style.display != 'none') { 
         el.style.display = 'none'; 
         } 
         else { 
          el.style.display = ''; 
         } 
        } 
           }

不幸的是，這段代碼不起作用..有人能指向我我犯了什麼錯誤嗎？因此，第二個代碼應該檢查密碼字段是否爲emtpy，如果它不爲空，則繼續進行toogle，如果不切換隻是隱藏密碼值。幫助：D謝謝

來源

2009-12-18 ant

試試這個它會工作

function togglePassword(obj) { 
var el = document.getElementById(obj); 
var input_el = document.getElementById('password_field'); 
if((input_el.style.display == ‘none’) || ((input_el.style.display=='') && (input_el.offsetWidth==0))){ 
el.style.display = 'block'; 
} else { 
el.style.display = ‘none’; 
} 
} 
           }

來源

2009-12-18 10:12:16 valli

這確實有效:-) – ant 2009-12-18 10:17:14

還有一件事..我把togglePassword函數onblur和onfocus放在password_field iput中。現在，當我點擊空白字段的密碼消失和偉大的，但是當我點擊密碼本身（元素）..沒有任何反應..是否有可能解決這個問題？ – ant 2009-12-18 10:21:20

嘗試在div中添加標籤和密碼字段，併爲此添加id。通過給這樣的你可以切換隻有字段或總標籤和字段 – valli 2009-12-18 10:29:32

-3

嗨，

嘗試使用類似JQuery的庫。他們真的很有幫助，在這麼簡單的任務，也可以處理相當複雜的...

重要的一點是：這樣的事情，像隱藏/顯示已經解決了百次。不推倒重來;-)

來源

2009-12-18 09:52:59 cRichter

是但對於密碼字段，如果我告訴密碼字段值，則該密碼將被屏蔽，怎麼樣？所以我需要改變字段類型或做更多的事情。「簡單」 – ant 2009-12-18 09:54:07

有一天我會得到全面寫了這個技術的細節，而是一個工作的實施已經坐在我的tmp目錄爲過去六個月：http://dorward.me.uk/tmp/label-work/example.html

來源

2009-12-18 09:55:15 Quentin

你之前給了我這個鏈接，只是我找不到它，但我希望你能回答之前發佈了上一個問題，首先感謝你所有，第二..是否有可能做到沒有jQuery？因爲我正在使用這個項目的原型，所以我試圖通過編寫普通的舊javascript來製作一切需要JavaScript的東西。謝謝 – ant 2009-12-18 10:07:07

當然。你只需要移植邏輯。（這是添加類來隱藏標籤獲得焦點，並且如果該字段具有非空值，則加載，並且刪除它onblur，但僅當該字段具有空值時） – Quentin 2009-12-18 10:10:57

那麼說..這正是什麼我正在嘗試做，看到我上面的「腳本」嘗試，我哪裏出錯了。也許＃1錯誤，我試圖隱藏場焦點標籤..而不是標籤焦點功能 – ant 2009-12-18 10:13:15

我還不太明白的要求，但你應該在你的功能驗證，如果你正在做的focu動作模糊並在此反應。

也許這樣的事情：

<script type="text/javascript"> 
function togglePassword(alwaysVisible, labelId, pwdId){ 
var label=document.getElementById(labelId); 
if (alwaysVisible){ 
    label.style.display=""; 
} else { 
    var pwd=document.getElementById(pwdId); 
    label.style.display= (pwd.value.length==0)?"":"none"; 
} 
} 
</script>

....

<form> 
<label for="pwd" id="labelPwd">Type your password&nbsp;:&nbsp;</label> 
<input name="pwd" id="pwd" onfocus="togglePassword(true, 'labelPwd', 'pwd')" onblur="togglePassword(false , 'labelPwd', 'pwd')" type="password"> 

<input type="submit">                
</form>

來源

2009-12-18 10:31:59 Patrick

在javascript中切換標籤元素

回答

相關問題