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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
代码详解django中数据库设置
2019/01/28 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
为什么是 Python -m
2020/06/19 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
如何在pycharm中安装第三方包
2020/10/27 Python
python爬取youtube视频的示例代码
2021/03/03 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
班队活动设计方案
2014/01/30 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
推荐信怎么写
2014/05/09 职场文书
企业公益活动策划方案
2014/08/24 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
升学宴演讲稿
2014/09/01 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书