编程 Javascript

js修改input的type属性及浏览器兼容问题探讨与解决

Posted in Javascript onJanuary 23, 2013

js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。在ff下仍是可读写属性。

今天遇到个问题，输入框有默认值“密码”，但获得焦点时，“密码”两字会去掉，输入时直接变成”****“的password类型。很明显，一开始的时候，input的类型是text，后来变成了password类型。直观的思路是用js修改input的type类型。但ie下这么做不可行，所以只能换个思路，写两个input，一个text类型，一个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>钱运来|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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

比较全的JS checkbox全选、取消全选、删除功能代码

Dec 19 Javascript

js 判断图片是否加载完以及实现图片的预下载

Aug 14 Javascript

JS判断页面是否出现滚动条的方法

Jul 17 Javascript

JavaScript地理位置信息API

Jun 11 Javascript

window.open打开窗口被拦截的快速解决方法

Aug 04 Javascript

jQuery.parseHTML() 函数详解

Jan 09 Javascript

jQuery EasyUI Draggable拖动组件

Mar 01 Javascript

angularjs实现过滤并替换关键字小功能

Sep 19 Javascript

Vue打包后出现一些map文件的解决方法

Feb 13 Javascript

vue 解决循环引用组件报错的问题

Sep 06 Javascript

详解JS浏览器事件循环机制

Mar 27 Javascript

vue 监听 Treeselect 选择项的改变操作

Aug 31 Javascript

重构Javascript代码示例(重构前后对比)

Jan 23 #Javascript

javascript提取URL的搜索字符串中的参数(自定义函数实现)

Jan 22 #Javascript

jQuery 插件仿百度搜索框智能提示(带Value值)

Jan 22 #Javascript

js jquery验证银行卡号信息正则学习

Jan 21 #Javascript

用jquery模仿的a的title属性(兼容ie6/7)

Jan 21 #Javascript

jquery创建一个新的节点对象(自定义结构/内容)的好方法

Jan 21 #Javascript

给jQuery方法添加回调函数一款插件的应用

Jan 21 #Javascript