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 相关文章推荐
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
webpack引入eslint配置详解
Jan 22 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
Vue实现购物车基本功能
Nov 08 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
Jquery cookie操作代码
2010/03/14 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python正则表达式的使用范例详解
2014/08/08 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
关于Django外键赋值问题详解
2017/08/13 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python实现彩票系统
2020/06/28 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
商场消防演习方案
2014/02/12 职场文书
迟到检讨书300字
2014/02/14 职场文书
工作会议主持词
2014/03/17 职场文书
法院授权委托书格式
2014/09/28 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
好员工观后感
2015/06/17 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书