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 相关文章推荐
jquery下json数组的操作实现代码
Aug 09 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
angular实现form验证实例代码
Jan 17 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
小程序实现抽奖动画
Apr 16 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php实现文件下载代码分享
2014/08/19 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Python FTP操作类代码分享
2014/05/13 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python实现求特征选择的信息增益
2018/12/18 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
零基础学python应该从哪里入手
2020/08/11 Python
python 读取、写入txt文件的示例
2020/09/27 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
数控技术专业毕业自荐书范文
2014/02/05 职场文书
诚实守信演讲稿
2014/09/01 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
党员批评与自我批评
2014/10/15 职场文书
合作协议书范本
2014/10/25 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL