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的闭包的一个示例说明
Nov 18 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
js获取和设置属性的方法
Feb 20 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 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实现查询百度google收录情况(示例代码)
2013/08/02 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
javascript新手语法小结
2008/06/15 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
小学教师节活动方案
2014/01/31 职场文书
青年文明号创建承诺
2014/03/31 职场文书
安全生产月活动总结
2014/05/04 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2016教师节问候语
2015/11/10 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技