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 firefox兼容ie的dom方法脚本
May 18 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
Javascript中typeof 用法小结
May 12 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
javascript数组去重小结
Mar 07 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 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通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python中进程和线程的区别详解
2017/10/29 Python
python Pygame的具体使用讲解
2017/11/03 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
旅游专业毕业生自荐书
2014/06/30 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
党支部书记岗位职责
2015/02/15 职场文书
幽灵公主观后感
2015/06/09 职场文书
总经理致辞
2015/07/29 职场文书
孙振耀退休感言
2015/08/01 职场文书
优秀员工演讲稿
2019/06/21 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android