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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 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中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
php强制运行广告的方法
2014/12/01 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
mongodb和php的用法详解
2019/03/25 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
实例说明Python中比较运算符的使用
2015/05/13 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Apache如何部署django项目
2017/05/21 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python实现最常见加密方式详解
2019/07/13 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
Python列表如何更新值
2020/05/27 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
文秘专业应届生求职信
2014/05/26 职场文书
党员个人剖析材料
2014/09/30 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2015大学生求职信范文
2015/03/20 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
2019旅游导游工作总结
2019/06/27 职场文书