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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
Javascript实现时间倒计时功能
2018/11/17 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python标准库与第三方库详解
2014/07/22 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python实现mean-shift聚类算法
2020/06/10 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
简约控的天堂:The Undone
2016/12/21 全球购物
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
农村党员一句话承诺
2014/05/30 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers