Неверная замена типа ввода HTML в IE8? - PullRequest
Новая
       20

Неверная замена типа ввода HTML в IE8?

2 голосов
/ 17 сентября 2009

У меня есть веб-сайт, который использует типичную форму для создания пользователя. Эта форма помещает имя поля в текстовое поле и использует действительно простой скрипт для очистки имени поля, когда поле получает фокус.

При получении пароля пользователя я в настоящее время очищаю имя поля (в данном случае «Пароль»), а затем меняю тип поля с текста на пароль. Это хорошо работало в IE6, IE7, Firefox и Safari, но, похоже, сломалось в IE8.

Я использую линию ... 

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

... проверить тип и затем ... 

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

... чтобы изменить тип.

Скрипт теперь разрывается в IE8 на этой строке. Я думаю, что мне нужно пойти с обменом div, но мне было интересно, если кто-то еще столкнулся с этим и может иметь исправление.

Ответы [ 4 ]

4 голосов
/ 17 сентября 2009

IE не позволяет вам менять тип ввода. Вы должны создать новый элемент и заменить существующий. Или покажи первое и скрой второе.

2 голосов
/ 17 сентября 2009

попробуйте это:

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

и

theBox.type = 'password';

1 голос
/ 23 декабря 2009

Или вы можете добавить значение метки Password, разместить его позади ввода с абсолютным позиционированием, установить прозрачный фон ввода и создать функцию переключения, которая будет запускать onfocus и onblur. Вот как я это сделал.

1 голос
/ 10 ноября 2009

Начиная с Internet Explorer 8, выражения не поддерживаются в режиме IE8. Для получения дополнительной информации см. http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx.

Microsoft, перепроектировав 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...