改变<输入>使用 JavaScript 在 IE 中输入 [英] Changing the <input> type in IE with JavaScript
问题描述
以下代码适用于除 IE
之外的所有网络浏览器:
This code below works in all web browsers except IE
:
<input type="text" name="passwordLogin" value="Password" onfocus="if(this.value=='Password'){this.value=''; this.type='password'};" onblur="if(this.value==''){this.value='Password'; this.type='text'};" size="25" />
如何为 IE 修复它?
How can I fix it for IE?
我做了一些更改,但仍然有错误.
I did some changes, but it still has an error.
我希望它像这里一样工作:
I want it to work like this like here:
<input type="text" name="usernameLogin" value="Email" onfocus="if(this.value=='Email'){this.value=''};" onblur="if(this.value==''){this.value='Email'};" size="25" />
如果我不输入任何内容,它会将值放回.
if I don't enter anything it will put the value back.
所以我尝试了这个:
<td colspan="2" id="passwordLoginTd">
<input id="passwordLoginInput1" type="text" name="passwordLogin" value="Password" onfocus="passwordFocus()" size="25" />
<input id="passwordLoginInput2" style="display: none;" type="password" name="passwordLogin" value="" onblur="passwordBlur()" size="25" />
</td>
<script type="text/javascript">
//<![CDATA[
passwordElement1 = document.getElementById('passwordLoginInput1');
passwordElement2 = document.getElementById('passwordLoginInput2');
function passwordFocus() {
passwordElement1.style.display = "none";
passwordElement2.style.display = "inline";
passwordElement2.focus();
}
function passwordBlur() {
if(passwordElement2.value=='') {
passwordElement2.style.display = "none";
passwordElement1.style.display = "inline";
passwordElement1.focus();
}
}
//]]>
</script>
如您所见,模糊不起作用.
as you can see the blur does not work.
终于明白了,我需要删除:
Finally I got it, I needed to remove:
passwordElement1.focus();
推荐答案
您不能在 Internet Explorer 中动态更改输入元素的类型.
You cannot dynamically change a the type of an input element in Internet Explorer.
一种可能的解决方法是:
One possible workaround would be to:
- 动态创建一个新元素.
- 将旧元素的属性复制到新元素中.
- 将新元素的类型设置为新类型.
- 然后用新元素替换旧元素.
您可能需要查看以下文章以了解上述内容的 JavaScript 植入:
You may want to check the following article for a JavaScript implantation of the above:
另一种选择是静态创建两个元素,但一次只有一个可见.可见性和焦点将取决于元素的价值.在这种情况下,您可能需要使用以下内容:
Another option would be to statically create the two elements, but having only one visible at a time. The visibility and the focus would depend on the value of the elements. In this case, you may want to use something like this:
<script type="text/javascript">
function checkType() {
var thisElement = document.getElementById('field_text');
var otherElement = document.getElementById('field_password');
if (thisElement.value === 'Password') {
otherElement.style.display = 'inline';
thisElement.style.display = 'none';
otherElement.focus();
}
}
</script>
<input type="text" value="Password" id="field_text" onfocus="checkType();" />
<input type="password" value="" style="display: none;" id="field_password" />
这篇关于改变<输入>使用 JavaScript 在 IE 中输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!