修改input输入框的type属性

最新推荐文章于 2024-05-14 09:22:24 发布

Lemon萌

最新推荐文章于 2024-05-14 09:22:24 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web问题解决技巧文章标签： input class function 浏览器 ie

本文链接：https://blog.youkuaiyun.com/taowanyy/article/details/7630022

web问题解决技巧专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个在IE8及以下浏览器中实现文本框聚焦时隐藏默认文本并切换为密码输入模式的方法，通过创建两个输入框并使用JavaScript进行交互操作来解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天，公司网站的登录页面要求要有一个效果：文本框内，当鼠标点击后，里面默认的文字消失；当鼠标焦点失去时，文字出现。原本以为自己找的这段控件对Password是有用的，可是发现IE8及以下的浏览器不兼容

<input type="text" class="input_txt2" value="Password" onFocus="if(this.value==defaultValue) {this.value='';this.type='password'}" onBlur="if(!value) {value=defaultValue; this.type='text';}" />

可是呢，他们又要求要有这种效果，没办法，只有继续找资料了，终于发现，原来IE浏览器中，是不识别对input的type属性直接修改的，它是一个只读的类型。后来辗转查找，终于找到了解决办法，于是就拿出来和大家一起分享

<input name="" type="text" value="Password" class="inputText_1" id="tx"  />
<input name="" type="password" style="display:none;" id="pwd" class="inputText_1" />

<script type="text/javascript">
var tx = document.getElementById("tx"), pwd = document.getElementById("pwd");
tx.onfocus = function(){
if(this.value != "Password") 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 = "Password";
}
</script>

先把password属性定义成一个输入框，然后，当鼠标的焦点聚在输入框里时，就把文本框变成密码框，这样，问题就解决了