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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
JavaScript创建、读取和删除cookie
Sep 03 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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
解析php中const与define的应用区别
2013/06/18 PHP
详解YII关联查询
2016/01/10 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
JQuery toggle使用分析
2009/11/16 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python文件操作的面试题
2013/06/22 面试题
评析教师个人的自我评价
2014/02/19 职场文书
装修施工安全责任书
2014/07/24 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
关于远足的感想
2015/08/10 职场文书
《风筝》教学反思
2016/02/23 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android