js修改input的type属性问题探讨


Posted in Javascript onOctober 12, 2013

js修改input的type属性有些限制。当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题。但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改。在ff下仍是可读写属性。

今天遇到个问题,输入框有默认值“密码”,但获得焦点时,“密码”两字会去掉,输入时直接变成”****“的password类型。很明显,一开始的时候,input的类型是text,后来变成了password类型。直观的思路是用js修改input的type类型。但ie下这么做不可行,所以只能换个思路,写两个input,一个text类型,一个password类型,分得监听onfocus和onblur事件。如下:

注意:script那段代码要写到html里面

<!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>阿当制作</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 数组学习资料收集
Apr 11 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
Angular的事件和表单详解
Dec 26 Javascript
简单实现js倒计时功能
Feb 13 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
vue观察模式浅析
Sep 25 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 #Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 #Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 #Javascript
JS验证身份证有效性示例
Oct 11 #Javascript
JS分页效果示例
Oct 11 #Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 #Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 #Javascript
You might like
php语言流程控制中的主动与被动
2012/11/05 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python实现选择排序
2017/06/04 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python @property的用法及含义全面解析
2018/02/01 Python
详解python3中的真值测试
2018/08/13 Python
python判断链表是否有环的实例代码
2020/01/31 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
单位介绍信范文
2014/01/18 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
承诺书范本
2015/01/21 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书