js修改input的type屬性及瀏覽器兼容問題探討與解決
更新時(shí)間：2013年01月23日 14:26:35 投稿：whsnow
js修改input的type屬性有些限制,今天遇到個問題一開始的時(shí)候，input的類型是text，后來變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行，所以只能換個思路感興趣的朋友可以了解下
js修改input的type屬性有些限制。當(dāng)input元素文檔流之前，是可以修改它的值的，在ie和ff下都沒問題。但如果input已經(jīng)存在于頁面，其type屬性在ie下就成了只讀屬性了，不可以修改。在ff下仍是可讀寫屬性。
今天遇到個問題，輸入框有默認(rèn)值“密碼”，但獲得焦點(diǎn)時(shí)，“密碼”兩字會去掉，輸入時(shí)直接變成”****“的password類型。很明顯，一開始的時(shí)候，input的類型是text，后來變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行，所以只能換個思路，寫兩個input，一個text類型，一個password類型，分得onfocus和onblur事件。如下：
復(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>錢運(yùn)來|qianyunlai.com制作</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)文章
這篇文章介紹了今天是星期幾的4種JS代碼寫法，有需要的朋友可以參考一下2013-09-09
今天把項(xiàng)目生成好后，發(fā)布到萬維網(wǎng)上進(jìn)行測試，發(fā)現(xiàn)table的隔行換色在IE8，chorem中不能正常顯示。找了許多資料，CSS看樣是不能解決，只能用JS來控制了2010-07-07
JavaScript的arguments對象應(yīng)用示例
使用特殊對象 arguments，開發(fā)者無需明確指出參數(shù)名，就能訪問它們，下面為大家介紹下其具體的應(yīng)用2014-09-09
Javascript 生成無限下拉列表實(shí)現(xiàn)代碼
js生成無線下拉列表的實(shí)現(xiàn)代碼。2009-03-03
光標(biāo)的帖子總結(jié)（Range的使用）...2006-07-07
scroll-view為滾動視圖,分為水平滾動和垂直滾動,這篇文章主要給大家介紹了關(guān)于微信小程序scroll-view不能左右滑動問題的解決方法,需要的朋友可以參考下2022-12-12
layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例
今天小編就為大家分享一篇layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)大風(fēng)車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
本文主要介紹了用原生js做單頁應(yīng)用的相關(guān)知識。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了小程序最新獲取用戶昵稱和頭像的方法總結(jié),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09