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 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
Javascript实现关闭广告效果
Jan 29 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
Python多进程fork()函数详解
2019/02/22 Python
python生成器用法实例详解
2019/11/22 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
为什么使用接口?
2014/08/13 面试题
Ado与Ado.net的相同与不同
2014/12/08 面试题
国贸专业个人求职信分享
2013/12/04 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
应届生找工作求职信
2014/06/24 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2014年残联工作总结
2014/11/21 职场文书
初中教师个人工作总结
2015/02/10 职场文书
入党个人总结范文
2015/03/02 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python