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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
小程序实现列表展开收起效果
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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
js实现京东轮播图效果
2017/06/30 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
幼儿教师研修感言
2014/02/12 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
住房租房协议书
2014/08/20 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
培训通知
2015/04/17 职场文书
行政上诉状范文
2015/05/23 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android