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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 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
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
JavaScript事件列表解说
2006/12/22 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
vuex入门最详细整理
2020/03/04 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
Python脚本实现下载合并SAE日志
2015/02/10 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python多进程写入同一文件的方法
2019/01/14 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python 如何批量更新已安装的库
2020/05/26 Python
Python列表如何更新值
2020/05/27 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
千元咖啡店的创业计划书范文
2013/12/29 职场文书
库房管理员岗位职责
2014/03/09 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
纪录片信仰观后感
2015/06/08 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏