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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
js URL参数的拼接方法比较
2012/02/15 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
redux.js详解及基本使用
2019/05/24 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
5种Python单例模式的实现方式
2016/01/14 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python自动识别文本编码格式代码
2019/12/26 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
2014年医学生毕业自我鉴定
2014/03/26 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
律师函格式范本
2015/05/27 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Nginx 匹配方式
2022/05/15 Servers