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 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
重构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
咖啡语言
2021/03/03 咖啡文化
坏狼php学习 计数器实例代码
2008/06/15 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
php中数组最简单的使用方法
2020/12/27 PHP
JS event使用方法详解
2008/04/28 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python continue语句用法实例
2014/03/11 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
实习自荐信
2013/10/13 职场文书
学期自我评价
2014/01/27 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书