Javascript改变输入类型动态不适用于IE8 [英] Javascript change input type dynamically doesnt work on IE8

问题描述

我有一个用于在网页中输入密码的输入字段：

 < input name =txtPasswordtype = textclass =input2id =txtPasswordvalue =密码onfocus =txtOnFocus2（'txtPassword'，'密码'）;的onblur =txtOnBlur2（ txtPassword，密码）; /> 
  

在初始状态下，用户应该读取密码作为初始值以及何时开始输入密码，该字段应改为输入密码。此外，当他将其设置为空白或初始值时，字段应将类型更改为文本并显示密码。

我编写了代码， ，Safari浏览器，它不改变IE8的密码类型。

这是我通过编辑现有功能代码所做的js代码：

 函数txtOnFocus2（elementId，defaultText）
 {
 if（document.getElementById（elementId）.value == defaultText）
 {
 document.getElementById（elementId）.value =; 
 document.getElementById（elementId）.type =password; 
 
 
 
函数txtOnBlur2（elementId，defaultText）
 {
 var textValue = document.getElementById（elementId）.value; 
 
 if（textValue == defaultText || textValue.length == 0）
 {
 document.getElementById（elementId）.type =text; 
 document.getElementById（elementId）.value = defaultText; 
 
 
 $ / code $ / pre 
 $ b $ p 
这在Firefox，chrome和safari中运行良好，但不会改变IE 8的字段类型。
解决方案
另一种解决方案是完全改变你的方法。以下技术会优雅地降级，更易于访问，并且依赖于JavaScript更少： 
 $ b   HTML   
 
 
 < div>< label for =email>电子邮件< / label> < input type =textname =emailid =email/>< / div> 
< div>< label for =password>密码< / label> < input type =passwordname =passwordid =password/>< / div> 
  
  JavaScript   
 < pre $  $（'input'）
 .focus（function（）{
 $（this）.css（'background-color'，'white'）; 
}）
 .blur（function（）{
 if（$。trim（$（this）.val（））==''）{
 $（this） .css（'background-color'，'transparent'）。val（''）; 
} 
}）; 
  

CSS


  input {
 background-color：transparent; 
 padding：2px; 
} 
 
标签{
颜色：灰色; 
 padding：2px 4px; 
位置：绝对; 
 z-index：-1; 
} 
  

现场演示： http://jsfiddle.net/rjkf4/

i have a input field for entering password in a webpage:

<input name="txtPassword" type="text" class="input2" id="txtPassword" value="Password" onfocus="txtOnFocus2('txtPassword','Password');" onblur="txtOnBlur2('txtPassword','Password');" />

in the initial state the usershould read "password" as the initial value and when he starts typing a password, the field should change to type password. Also when he sets it back to blank or initial value the field should change type to "text" and show password.

I wrote code an got it working on Firefox, Chrome, and safari and its not changing the type to password on IE 8.

this is the js code i made by editing an existing function code:

 function txtOnFocus2(elementId, defaultText)
 { 
    if (document.getElementById(elementId).value == defaultText)
    {
       document.getElementById(elementId).value = "";
  document.getElementById(elementId).type = "password";
    }
 }

 function txtOnBlur2(elementId, defaultText)
 {
    var textValue = document.getElementById(elementId).value;

    if (textValue == defaultText || textValue.length == 0)
    {
      document.getElementById(elementId).type = "text"; 
  document.getElementById(elementId).value = defaultText;
    }
 }

This is working fine in Firefox,chrome and safari but doesn't change field type on IE 8.

解决方案

An alternative solution would be to change your approach altogether. The following technique degrades gracefully, is more accessible, and less JavaScript-dependant:

HTML

<div><label for="email">Email</label> <input type="text" name="email" id="email" /></div>
<div><label for="password">Password</label> <input type="password" name="password" id="password" /></div>

JavaScript

$('input')
    .focus(function() {
        $(this).css('background-color', 'white');
    })
    .blur(function() {
        if($.trim($(this).val()) == '') {
            $(this).css('background-color', 'transparent').val('');
        }
    });

CSS

input {
    background-color: transparent;
    padding: 2px;
}

label {
    color: gray;
    padding: 2px 4px;
    position: absolute;
    z-index: -1;
}

Live demo: http://jsfiddle.net/rjkf4/

这篇关于Javascript改变输入类型动态不适用于IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！