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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
微信小程序实现底部弹出模态框
Nov 18 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视频拍照上传头像功能实现代码分享
2015/10/08 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
jQuery 操作XML入门
2008/12/25 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
IBatis持久层技术
2016/07/18 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
婚前协议书范本
2014/10/27 职场文书
公司开除员工通知
2015/04/22 职场文书
博物馆观后感
2015/06/05 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
创业计划书之家政服务
2019/09/18 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL