使用JavaScript更改IE中的<input>types
该线
<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以外的所有网页浏览器…我如何解决它的IE浏览器？
确定做了一些更改仍然有错误
我希望它像这样工作
<input type="text" name="usernameLogin" value="Email" onfocus="if(this.value=='Email'){this.value=''};" onblur="if(this.value==''){this.value='Email'};" size="25" />
如果我不input任何东西，它会把价值放回去
所以我试了一下
<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();
您无法dynamic更改Internet Explorer中input元素的types。
一种可能的解决方法是：
- dynamic创build一个新的元素。
- 将旧元素的属性复制到新元素中。
- 将新元素的types设置为新types。
- 然后用新元素replace旧元素。
你可能想检查下面的文章以上的JavaScript植入：
- 使用JavaScript更改input元素types
另一个select是静态创build这两个元素，但一次只能看到一个元素。 能见度和重点将取决于元素的价值。 在这种情况下，你可能想要使用这样的东西：
<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" />
你可以这样做。 但是，在externalhtml上进行replace实质上是重新声明了元素，所以在标签声明中没有明确定义的任何属性都将被遗忘。 这就是为什么文本值首先保存到variables。 与jQuery的attr和prop不同，这可以在所有版本的IE中使用。 我用了一个真正的IE10，我用5.5到9的IETester。
这是一个小提琴 ，下面的代码：
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; }
第三个select是改变一个类名，而不是一个值，然后改变焦点上的bg图像，而不是types。
