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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
js+css实现打字效果
Jun 24 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP生成器简单实例
2015/05/13 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
js实现五星评价功能
2017/03/08 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python映射列表实例分析
2015/01/26 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python正则表达式的使用
2017/06/12 Python
Python如何快速实现分布式任务
2017/07/06 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
基于PyTorch中view的用法说明
2021/03/03 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
this关键字的含义
2015/04/08 面试题
Linux内核产生并发的原因
2016/11/08 面试题
项目建议书格式
2014/03/12 职场文书
企业授权委托书范本
2014/04/02 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
员工加薪申请报告
2015/05/15 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android