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 相关文章推荐
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
Vue实现按钮级权限方案
Nov 21 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加MySQL消息队列深入理解
2021/02/27 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
大课间活动制度
2014/01/18 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
党建工作经验交流材料
2014/05/25 职场文书
实验室的标语
2014/06/20 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
教师辞职书范文
2015/02/26 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js