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 10 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
js实现div在页面拖动效果
May 04 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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/03/22 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python中global用法实例分析
2015/04/30 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
python可视化text()函数使用详解
2020/02/11 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
反邪教警示教育方案
2014/05/13 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
社区植树节活动总结
2015/02/06 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
深入浅析Django MTV模式
2021/09/04 Python