2012-04-03 382 views
2
<form> 
<input type="text" id="username" value="Username"> 
<div style="position:relative"> 
<span style="position:absolute;top:0;" id="passwordTxt">Password</span> 
<input style="position:absolute;top:0;visibility:visible;" 
type="password" id="password" value=""> 
</div> 
</form> 

var obj=document.getElementById("password") 
obj.addEventListener("change", change(0) , false); 
obj.addEventListener("input", change(0) , false); 
obj.addEventListener("focus", change(0) , false); 
obj.addEventListener("blur", change(1) , false); 

function change(action){ 
return function(){ 
var txt = document.getElementById("passwordTxt") 
var pass= document.getElementById("password") 
if(action){ 
if(pass.value =="") 
txt.style.visibility="visible"; 
} 
else txt.style.visibility="hidden"; 
} 
} 

type="password"的存在將使瀏覽器提示輸入remember password功能。如果用戶名已經存在,請使用緩存的用戶名下拉彈出窗口,如果它的password存在 - 它會被瀏覽器填充 - 非常方便。但是,該功能不會觸發任何JS事件!!如果在該密碼文本框中輸入密碼或任何值,我希望span被隱藏,但瀏覽器功能正在讓一個小錯誤蔓延。瀏覽器自動填充功能不觸發任何JS事件

任何幫助表示讚賞。(我不使用jQuery,所以一個簡單的JS解決方法/解決方案是什麼會幫助我)

回答

0

我相信你想掩蓋與標題密碼的文本框,如果它是空的。我能想到的簡單解決方案是掛鉤頁面加載並查看文本是否可用。

更好的方法是使用現有的和經過測試的框架。你可以在Bootstrap中找到你要找的東西。轉到http://twitter.github.com/bootstrap/base-css.html#forms,看看內聯表格的例子

+0

掛鉤到頁面加載和檢查文本可用性??你能詳細說明?? ..和,是 - 什麼發生在內聯表格是我想要實現,不幸的是我有一個凝灰岩時間.. – 2012-04-04 07:35:19

+0

爲什麼不使用引導本身?從你的代碼你不是針對IE瀏覽器呢? – Ramesh 2012-04-04 08:20:07

+0

好吧,它只是一個示例代碼..我希望它是跨橋樑,引導帶 - 使用HTML5,這又是 - 與舊版瀏覽器不兼容。 – 2012-04-04 09:45:40