Question

我有一个网站，使用典型的表单进行用户创建。此表单将字段的名称放在文本框内，并使用一个非常简单的脚本在字段获得焦点时清除字段名称。

获取用户密码时，我正在清除字段名称（本例中为“密码”），然后将字段类型从文本交换为密码。这在IE6，IE7，Firefox和Safari中运行良好，但似乎在IE8中已经破解。

我正在使用这条线...

theBox.getAttribute('type')=='text'

...检查类型然后......

theBox.setAttribute('type','password')

...改变类型。

此行的脚本现在在IE8中中断。我想我需要使用div交换，但我想知道是否有其他人遇到过这个并且可能有一个修复。

Answer 1

IE不允许您更改输入类型。您应该创建一个新元素并替换现有元素。或者显示第一个并隐藏另一个。

Answer 2

试试这个：

if (theBox.type == 'text') { ...

和

theBox.type = 'password';

Answer 3

从Internet Explorer 8开始，IE8模式不支持表达式。有关详细信息，请参阅http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx。

微软重新设计了IE8以实现完全符合CSS2.1标准，这使得他们的实施自由再次成为一个糟糕的地方。标准没有说明限制对像这样的元素属性的访问，MS声称他们出于安全原因这样做了。

对此的一个解决方法是在文本字段的焦点上，将其替换为密码字段，密码字段在模糊时交换文本字段。请允许以下代码进行演示。它将焦点值为“密码”的文本框更改为空密码框。在此密码框模糊时，如果值为空字符串，则元素将更改回文本框，其值为“密码”。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
        function change(event)
        {
            var evt = (window.event) ? window.event : event;
            var elem = (evt.srcElement) ? evt.srcElement : evt.target;
            var inputID = $(elem).attr('id');
            var inputValue = $(elem).attr('value');
            if(inputValue == 'Password')
            {
                var passwordInput = document.createElement('input');
                passwordInput.id = inputID;
                passwordInput.type = 'password';
                passwordInput.value = '';
                passwordInput.style.textAlign = 'center';
                passwordInput.style.color = 'black';
                passwordInput.onblur = changeBack;
                document.getElementById(inputID).parentNode.replaceChild(passwordInput, document.getElementById(inputID));
                window.setTimeout(function(){passwordInput.focus();}, 0);
            }
        }

        function changeBack(event)
        {
            var evt = (window.event) ? window.event : event;
            var elem = (evt.srcElement) ? evt.srcElement : evt.target;
            var inputID = $(elem).attr('id');
            var inputValue = $(elem).attr('value');
            if(inputValue == '')
            {
                var textInput = document.createElement('input');
                textInput.type = 'text';
                textInput.id = inputID;
                textInput.value = 'Password';
                textInput.style.textAlign = 'center';
                textInput.style.color = 'grey';                 
                textInput.onfocus = change;
                document.getElementById(inputID).parentNode.replaceChild(textInput, document.getElementById(inputID));
            }
        }
    </script>
</head>
<body>
    <input id="inputField" type="text" value="Password" style="text-align:center;color:grey" onfocus="change(event)" />
</body></html>

Answer 4

或者您可以添加标签值Password，将其置于绝对定位的输入后面，将输入背景设置为透明并创建切换功能，该功能将触发onfocus和onblur。这就是我做到的。

在IE8中HTML输入类型交换？

4 个答案: