下面的代码适用于除 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?
我做了一些更改,但仍然有错误。
我希望它像这里一样工作:
<input type="text" name="usernameLogin" value="Email" onfocus="if(this.value=='Email'){this.value=''};" onblur="if(this.value==''){this.value='Email'};" size="25" />
如果我不输入任何内容,它会将值放回原处。
所以我尝试了这个:
<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>
如您所见,模糊不起作用。
最后我明白了,我需要删除:
passwordElement1.focus();
你可以这样做。然而,对outerhtml 进行替换本质上是重新声明该元素,因此标签声明中未明确定义的任何属性都将被忘记。这就是为什么文本值首先保存到变量中的原因。与 jQuery 的 attr 和 prop 不同,这适用于所有版本的 IE。我使用了真正的 IE10,并使用了 5.5 到 9 的 IETester。
这是一个小提琴 http://jsfiddle.net/v65v3xha/,代码如下:
HTML
<input id="myinput" type="password">
<input value="transform" id="transformButton" type="button">
JS
//attach a click handler to the button to make it transform
//when clicked, via our transform() function below
document.getElementById('transformButton').addEventListener("click", transform);
//flag of whether or not it is a password field or text field
var isPassword = true;
//this function will toggle the input between being a password or a text input
function transform() {
//copy the element itself, its html source, and value text to a variable
var myInput = document.getElementById("myinput");
var oldHtml = myInput.outerHTML;
var text = myInput.value;
if (isPassword)
{
//replace "password" with "text" in the html if it is a password field
var newHtml = oldHtml.replace(/password/g, "text");
}
else
{
//replace "text" with "password" if it is a text field
newHtml = oldHtml.replace(/text/g, "password");
}
//update the html
myInput.outerHTML = newHtml;
//restore the text value
myInput = document.getElementById("myinput");
myInput.value = text;
//toggle the isPassword flag
isPassword = !isPassword;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)