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 使用技巧精萃(.net html
Apr 25 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 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+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
动态加载js的几种方法
2006/10/23 Javascript
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Django如何配置mysql数据库
2018/05/04 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
巴西手表购物网站:eclock
2019/03/19 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
财务会计应届生求职信
2013/11/24 职场文书
走进敬老院活动总结
2014/07/10 职场文书
自主招生自荐信范文
2015/03/04 职场文书
升学宴祝酒词
2015/08/11 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis