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 一段左右两边随屏滚动的代码
Jun 18 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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的分页功能
2007/03/21 PHP
php中变量及部分适用方法
2008/03/27 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
WebPack基础知识详解
2017/01/16 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
最新奶茶店创业计划书
2014/01/25 职场文书
小学体育教学反思
2014/01/31 职场文书
对教师的评语
2014/04/28 职场文书
学校花圃的标语
2014/06/18 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js