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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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水印
2007/03/16 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
django的csrf实现过程详解
2019/07/26 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
电子商务求职信
2014/06/15 职场文书
超市创业计划书
2014/09/15 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
MongoDB支持的索引类型
2022/04/11 MongoDB
i7 6700处理器相当于i5几代
2022/04/19 数码科技