js修改input的type属性及浏览器兼容问题探讨与解决


Posted in Javascript onJanuary 23, 2013

js修改input的type属性有些限制。当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题。但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改。在ff下仍是可读写属性。

今天遇到个问题,输入框有默认值“密码”,但获得焦点时,“密码”两字会去掉,输入时直接变成”****“的password类型。很明显,一开始的时候,input的类型是text,后来变成了password类型。直观的思路是用js修改input的type类型。但ie下这么做不可行,所以只能换个思路,写两个input,一个text类型,一个password类型,分得监听onfocus和onblur事件。如下:

<!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>钱运来|qianyunlai.com制作</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 相关文章推荐
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
解决layui的input独占一行的问题
Sep 10 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 #Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 #Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 #Javascript
js jquery验证银行卡号信息正则学习
Jan 21 #Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 #Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 #Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 #Javascript
You might like
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
培养自己的php编码规范
2015/09/28 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python高斯消除矩阵
2019/01/02 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
对Python函数设计规范详解
2019/07/19 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
工作决心书
2014/03/11 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
好好学习保证书
2015/02/26 职场文书
员工辞职信怎么写
2015/02/27 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
欢送领导祝酒词
2015/08/12 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
MySQL实现配置主从复制项目实践
2022/03/31 MySQL