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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 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.MVC的模板标签系统(三)
2006/09/05 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PDO::prepare讲解
2019/01/29 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
js实现全选反选不选功能代码详解
2019/04/24 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
python 瀑布线指标编写实例
2020/06/03 Python
Flask处理Web表单的实现方法
2021/01/31 Python
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
教师自荐书
2013/10/08 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
病假证明模板
2015/06/19 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js