js修改input的type屬性及瀏覽器兼容問(wèn)題探討與解決
js修改input的type屬性有些限制。當(dāng)input元素文檔流之前,是可以修改它的值的,在ie和ff下都沒(méi)問(wèn)題。但如果input已經(jīng)存在于頁(yè)面,其type屬性在ie下就成了只讀屬性了,不可以修改。在ff下仍是可讀寫屬性。
今天遇到個(gè)問(wèn)題,輸入框有默認(rèn)值“密碼”,但獲得焦點(diǎn)時(shí),“密碼”兩字會(huì)去掉,輸入時(shí)直接變成”****“的password類型。很明顯,一開(kāi)始的時(shí)候,input的類型是text,后來(lái)變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行,所以只能換個(gè)思路,寫兩個(gè)input,一個(gè)text類型,一個(gè)password類型,分得onfocus和onblur事件。如下:
<!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)來(lái)|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)文章
JavaScript的arguments對(duì)象應(yīng)用示例
使用特殊對(duì)象 arguments,開(kāi)發(fā)者無(wú)需明確指出參數(shù)名,就能訪問(wèn)它們,下面為大家介紹下其具體的應(yīng)用2014-09-09
Javascript 生成無(wú)限下拉列表實(shí)現(xiàn)代碼
js生成無(wú)線下拉列表的實(shí)現(xiàn)代碼。2009-03-03
微信小程序scroll-view指定滾動(dòng)元素起始位置怎么做
scroll-view為滾動(dòng)視圖,分為水平滾動(dòng)和垂直滾動(dòng),這篇文章主要給大家介紹了關(guān)于微信小程序scroll-view不能左右滑動(dòng)問(wèn)題的解決方法,需要的朋友可以參考下2022-12-12
layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例
今天小編就為大家分享一篇layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧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

