VPF::Динамическое изменение типа INPUT элемента

anthrax

Дата 21.9.2005, 20:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 37
Регистрация: 12.12.2003

Репутация: нет
Всего: 2

Привет, всем!

Итак задачка:
Есть чекбокс, событие onchange которого должно изменять тип INPUT элемента с 'text' на 'password'. Это нужно для того чтобы скрыть вводимую пользователем информацию по желанию.
Я использую в onchange примерно такой код:

Код


document.form_name.input_name.type = document.form_name.checkbox_name.checked ? 'password' : 'text';

На что ИЕ ругается, что он type не может найти, хотя в FF и Mozilla без проблем все работает. Может у кого есть идеи по-лучше?

Aliance

Дата 21.9.2005, 21:41 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Во-первых, у интерфейса HTMLInputElement типа Checkbox нет события onchange, проверим это на примере:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>© AlianceHTMLEditor [ http://editor.sut.net.ru/editor.html ]</TITLE>
</HEAD>

<BODY>

<form action="" name="frm">
<INPUT type="checkbox" name="ch" id="ch" value="choosen" onchange="alert('gg')" />
</form>

</BODY>
</HTML>

Значит используем событие onclick.

Во-вторых, читая MSDN, а именно свойство type элемента Input:checkbox мы видим следующее:

Цитата

Remarks

As of Microsoft Internet Explorer 5, the type property is read/write-once, but only when an input element is created with the createElement method and before it is added to the document.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 21.9.2005, 21:43 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Во первых смотрим IDL HTMLInputElement, убеждаемся что поле readonly, следовательно поведение ИЕ более соотвествует стандартам, чем мозиллы.

Во вторых подумаем логически, это два разных типа элемента, ну пусть password и text похожи, но всё таки "изнутри" это два разных типа элемента. Отсюда становиться ясно, что изменяя тип элемента, ты должен создать новый и заменить им существующий:

http://forum.vingrad.ru/index.php?showtopi...ndpost&p=483093

Похожий вопрос, но для элемента file.

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Aliance

Дата 21.9.2005, 21:46 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Решаем эту проблема так:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>© AlianceHTMLEditor [ http://editor.sut.net.ru/editor.html ]</TITLE>
<script type="text/javascript" language="JavaScript">
<!--//--><![CDATA[//><!--

function changeType(checkbox) {
   var state = checkbox.checked;
   var type_of_elem = (state) ? 'password' : 'text';
   var checkbox_object = '<input type="' + type_of_elem + '" />';
   var div = document.getElementById('place');
   div.innerHTML = checkbox_object;
}

//--><!]]>
</SCRIPT>
</HEAD>

<BODY>

<form action="" name="frm">
<INPUT type="checkbox" name="ch" id="ch" value="choosen" onchange="changeType(this)" />
<div id="place">

<input type="text" />

</div>
</form>

</BODY>
</HTML>

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

anthrax

Дата 21.9.2005, 22:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 37
Регистрация: 12.12.2003

Репутация: нет
Всего: 2

С onchange прогнал конечно smile

и вопрос немного не так сформулировал, судя по тому как его окружающие поняли.

вот такая страничка:

Код



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>© AlianceHTMLEditor [ http://editor.sut.net.ru/editor.html ]</TITLE>
</HEAD>

<BODY>

<form action="" name="frm">
<input type="text" name="inp" value="some_val">
<INPUT type="checkbox" name="ch" id="ch" value="choosen" onclick="this.form.inp.type=this.checked ? 'text' : 'password'" />
</form>

</BODY>
</HTML>

В msdn сказано что type для <input type="text"> read/write. Хотя на деле совсем не так.

anthrax

Дата 21.9.2005, 22:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 37
Регистрация: 12.12.2003

Репутация: нет
Всего: 2

шустро вы отвечаете smile

Aliance'у респект за пример. Жаль сам не догадался ...
Только вот пример гораздо лучше будет работать если все же использовать onclick smile

Zeroglif

Дата 22.9.2005, 08:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66

Ещё вариант, может пригодится...

Код


<html>
    <head>
        <script type="text/javascript" language="JavaScript">
        function F(a,b,c)
        {
            var x,y,n='className',v='value';
            c.checked?(x=a,y=b):(x=b,y=a);
            x[n]='b';
            y[n]='a';
            y[v]=x[v];
        }
        </script>
        <style type='text/css'>
            .a,.b {width:100px}
            .a{display:inline}
            .b{display:none}
        </style>
    </head>
    <body>
        <form>
            <input type="text" name="a" value="pass" class="a">
            <input type="password" name="b" value="" class="b"><br>
            <input type="checkbox" onclick=F(this.form.a,this.form.b,this)>cкрыть
        </form>
    </body>
</html>

p.s. Отличный форум, без воды, плюс прекрасно читается...

Aliance

Дата 22.9.2005, 14:31 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Цитата(anthrax @ 21.9.2005, 23:13)

В msdn сказано что type для <input type="text"> read/write. Хотя на деле совсем не так.

Там сказано, что оно используется для записи, только если оно создано с помощью метода createElement().

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »