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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
JS字符串截取函数实例
Dec 27 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
vue组件中的数据传递方法
May 14 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
一个程序下载的管理程序(四)
2006/10/09 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
javascript引用对象的方法
2007/01/11 Javascript
js实现DIV的一些简单控制
2007/06/04 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
js实现随机点名
2021/01/19 Javascript
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
聊聊python中的异常嵌套
2020/09/01 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
我的老师教学反思
2014/05/01 职场文书
委托书范本
2014/09/13 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
vue自定义右键菜单之全局实现
2022/04/09 Vue.js