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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
详解easyui 切换主题皮肤
Apr 04 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
javascript实现随机抽奖功能
Dec 30 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使用PDO方法详解
2014/12/27 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
python脚本替换指定行实现步骤
2017/07/11 Python
Python3 处理JSON的实例详解
2017/10/29 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
python如何基于redis实现ip代理池
2020/01/17 Python
Django之腾讯云短信的实现
2020/06/12 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
几个Shell Script面试题
2014/04/18 面试题
中英文求职信范文
2014/01/27 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
初三英语教学计划
2015/01/23 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
mysql 排序失效
2022/05/20 MySQL