js修改input的type屬性問題探討
更新時間：2013年10月12日 10:35:31 作者：
當(dāng)input元素還未插入文檔流之前，是可以修改它的值的，在ie和ff下都沒問題。但如果input已經(jīng)存在于頁面，其type屬性在ie下就成了只讀屬性了，不可以修改
js修改input的type屬性有些限制。當(dāng)input元素還未插入文檔流之前，是可以修改它的值的，在ie和ff下都沒問題。但如果input已經(jīng)存在于頁面，其type屬性在ie下就成了只讀屬性了，不可以修改。在ff下仍是可讀寫屬性。
今天遇到個問題，輸入框有默認(rèn)值“密碼”，但獲得焦點時，“密碼”兩字會去掉，輸入時直接變成”****“的password類型。很明顯，一開始的時候，input的類型是text，后來變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行，所以只能換個思路，寫兩個input，一個text類型，一個password類型，分得監(jiān)聽onfocus和onblur事件。如下：
注意：script那段代碼要寫到html里面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿當(dāng)制作</title>
</head>
<style type="text/css">
</style>
<body>
<input name="" type="text" value="密碼" class="inputText_1" id="tx" style="width:100px;" />
<input name="" type="password" style="display:none;width:100px;" id="pwd" />
<script type="text/javascript">
var tx = document.getElementById("tx"), pwd = document.getElementById("pwd");
tx.onfocus = function(){
if(this.value != "密碼") return;
this.style.display = "none";
pwd.style.display = "";
pwd.value = "";
pwd.focus();
}
pwd.onblur = function(){
if(this.value != "") return;
this.style.display = "none";
tx.style.display = "";
tx.value = "密碼";
}
</script>
</body>
</html>
今天遇到個問題，輸入框有默認(rèn)值“密碼”，但獲得焦點時，“密碼”兩字會去掉，輸入時直接變成”****“的password類型。很明顯，一開始的時候，input的類型是text，后來變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行，所以只能換個思路，寫兩個input，一個text類型，一個password類型，分得監(jiān)聽onfocus和onblur事件。如下：
注意：script那段代碼要寫到html里面
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿當(dāng)制作</title>
</head>
<style type="text/css">
</style>
<body>
<input name="" type="text" value="密碼" class="inputText_1" id="tx" style="width:100px;" />
<input name="" type="password" style="display:none;width:100px;" id="pwd" />
<script type="text/javascript">
var tx = document.getElementById("tx"), pwd = document.getElementById("pwd");
tx.onfocus = function(){
if(this.value != "密碼") return;
this.style.display = "none";
pwd.style.display = "";
pwd.value = "";
pwd.focus();
}
pwd.onblur = function(){
if(this.value != "") return;
this.style.display = "none";
tx.style.display = "";
tx.value = "密碼";
}
</script>
</body>
</html>
相關(guān)文章
簡單對比分析JavaScript中的apply,call與this的使用
簡單的說call，apply都屬于Function.prototype的一個方法，它是JavaScript引擎內(nèi)在實現(xiàn)的，因為屬于Function.prototype，所以每個Function對象實例(就是每個方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當(dāng)然是針對方法的了，這兩個方法是容易混淆的2015-12-12
下面小編就為大家分享一篇原生js實現(xiàn)移動端觸摸輪播的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
不知道屏幕前的朋友們，有沒有和我一樣，覺得LRU算法原理很容易理解，實現(xiàn)起來卻很復(fù)雜。所以本文就為大家整理了一下實現(xiàn)的示例代碼，需要的可以參考一下2023-04-04
這篇文章主要為大家介紹了JavaScript函數(shù)this指向，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件
這篇文章主要介紹了創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件 的相關(guān)資料,需要的朋友可以參考下2016-06-06
JavaScript禁止右擊保存圖片,禁止拖拽圖片的實現(xiàn)代碼
這篇文章主要介紹了JavaScript禁止右擊保存圖片,禁止拖拽圖片的實現(xiàn)代碼,代碼簡單易懂，非常不錯，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
IE8對JS通過屬性和數(shù)組遍歷解析不一樣的地方探討
如果是非IE8瀏覽器例如（IE7、IE9、Chrome、FF，僅測試這幾種）通過屬性和數(shù)組遍歷，其結(jié)果是一樣的，但對于IE8，結(jié)果會有一點小小的差異，在IE8下會把原型鏈擴展方法當(dāng)做一個屬性輸出，大家可以測試一下2013-05-05
這篇文章主要介紹了微信開發(fā)的學(xué)習(xí)筆記，js實現(xiàn)tabs選項卡效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
JS獲取并操作iframe中元素的方法，需要的朋友可以參考一下2013-03-03
JavaScript數(shù)學(xué)對象之?dāng)?shù)字進制轉(zhuǎn)換
這篇文章主要為大家講解了JavaScript數(shù)學(xué)對象——數(shù)字進制轉(zhuǎn)換的實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05