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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
简单的js计算器实现
2016/10/26 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
python interpolate插值实例
2020/07/06 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
手工社团活动方案
2014/02/17 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
职工年度考核评语
2014/12/31 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python