js修改input的type屬性問題探討
更新時(shí)間：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下仍是可讀寫屬性。
今天遇到個(gè)問題，輸入框有默認(rèn)值“密碼”，但獲得焦點(diǎn)時(shí)，“密碼”兩字會(huì)去掉，輸入時(shí)直接變成”****“的password類型。很明顯，一開始的時(shí)候，input的類型是text，后來變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行，所以只能換個(gè)思路，寫兩個(gè)input，一個(gè)text類型，一個(gè)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>
今天遇到個(gè)問題，輸入框有默認(rèn)值“密碼”，但獲得焦點(diǎn)時(shí)，“密碼”兩字會(huì)去掉，輸入時(shí)直接變成”****“的password類型。很明顯，一開始的時(shí)候，input的類型是text，后來變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行，所以只能換個(gè)思路，寫兩個(gè)input，一個(gè)text類型，一個(gè)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)文章
簡(jiǎn)單對(duì)比分析JavaScript中的apply,call與this的使用
簡(jiǎn)單的說call，apply都屬于Function.prototype的一個(gè)方法，它是JavaScript引擎內(nèi)在實(shí)現(xiàn)的，因?yàn)閷儆贔unction.prototype，所以每個(gè)Function對(duì)象實(shí)例(就是每個(gè)方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當(dāng)然是針對(duì)方法的了，這兩個(gè)方法是容易混淆的2015-12-12
原生js實(shí)現(xiàn)移動(dòng)端觸摸輪播的示例代碼
下面小編就為大家分享一篇原生js實(shí)現(xiàn)移動(dòng)端觸摸輪播的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
JavaScript實(shí)現(xiàn)LRU算法的示例詳解
不知道屏幕前的朋友們，有沒有和我一樣，覺得LRU算法原理很容易理解，實(shí)現(xiàn)起來卻很復(fù)雜。所以本文就為大家整理了一下實(shí)現(xiàn)的示例代碼，需要的可以參考一下2023-04-04
這篇文章主要為大家介紹了JavaScript函數(shù)this指向，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件
這篇文章主要介紹了創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件 的相關(guān)資料,需要的朋友可以參考下2016-06-06
JavaScript禁止右擊保存圖片,禁止拖拽圖片的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript禁止右擊保存圖片,禁止拖拽圖片的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
IE8對(duì)JS通過屬性和數(shù)組遍歷解析不一樣的地方探討
如果是非IE8瀏覽器例如（IE7、IE9、Chrome、FF，僅測(cè)試這幾種）通過屬性和數(shù)組遍歷，其結(jié)果是一樣的，但對(duì)于IE8，結(jié)果會(huì)有一點(diǎn)小小的差異，在IE8下會(huì)把原型鏈擴(kuò)展方法當(dāng)做一個(gè)屬性輸出，大家可以測(cè)試一下2013-05-05
微信開發(fā) js實(shí)現(xiàn)tabs選項(xiàng)卡效果
這篇文章主要介紹了微信開發(fā)的學(xué)習(xí)筆記，js實(shí)現(xiàn)tabs選項(xiàng)卡效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JS獲取并操作iframe中元素的方法，需要的朋友可以參考一下2013-03-03
JavaScript數(shù)學(xué)對(duì)象之?dāng)?shù)字進(jìn)制轉(zhuǎn)換
這篇文章主要為大家講解了JavaScript數(shù)學(xué)對(duì)象——數(shù)字進(jìn)制轉(zhuǎn)換的實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05