js修改input的type属性问题探讨
更新时间：2013年10月12日 10:35:31 作者：
当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改
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>
今天遇到个问题，输入框有默认值“密码”，但获得焦点时，“密码”两字会去掉，输入时直接变成”****“的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>
相关文章
这篇文章主要介绍了JS实现的新闻列表自动滚动效果,涉及javascript基于时间函数的页面元素属性动态变换相关操作技巧,需要的朋友可以参考下2019-01-01
不多介绍了,应该见很多了，见过很多网站用的是Jquery的插件,个人觉得不够灵活。2009-12-12
Javascript Cookie读写删除操作的函数代码，需要操作cookies的朋友可以参考下。2010-03-03
这篇文章主要为大家详细介绍了微信小程序实现弹幕墙、祝福墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家详细介绍了JavaScript实现验证码案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了微信小程序如何加载数据库真实数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了JS获取图片lowsrc属性的方法,涉及javascript操作网页图片属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JavaScript添加随滚动条滚动窗体的方法,涉及JavaScript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下2016-02-02
在js中可以通过indexOf()方法找到指定的字符位置,再使用length属性获得字符串的长度,下面这篇文章主要给大家介绍了关于如何用js截取字符串开头、结尾及两字符串之间的内容的相关资料,需要的朋友可以参考下2022-11-11
虽然很少会遇到给bind返回的函数做new操作的场景，但面试中还是会涉及到的，所以本文将实现一下兼容new操作的bind写法，顺便学习一下new操作符，需要的可以参考一下2022-07-07
最新评论