Input type="password" как показать value &

[Obormot]

Есть форма ввода пароля, к ней подключен JS скрипт autoclear т.е. содержимое поля, value очищается после того как щелкаешь по полю.

Задача вставить в поле input type="password" добавить value например "Придумайте пароль.."
Соответствено если написать так:

 <input type="password" size="#" name="password" id="#" class="f-input autoclear" value="Придумайте пароль..." require="true" datatype="require" />

То в поле показваются кружки , и очищаются после клика.

Как можно решить эту проблему ?

 

[dmx]

type="password"

В любом случае будет закрытым. Ставь type="text"

 

[Obormot]

А как тогда при type="text" скрыть вводимые символы ?

 

[mdss]

Для просмотра ссылки Войди или Зарегистрируйся

 

[Obormot]

Спасибо за подсказки, сам погуглил немного, еще варианты решения для данной ситуации, все на JS, пример что выше так и не смог реализовать, возможно из-за того что страница перегружена JS и половина конфликтует уже

Насколько я понял есть решения в HTML5, вот

<input name="login_password" type="text" class="f_input" style="width:100px" value="пароль" onblur="if (this.value == ''){ this.value=this.prev; this.type='text';}" onfocus="if (!this.prev) this.prev = this.value; if (this.value == this.prev){ this.value='';this.type='password';}" />

С HTML5 не знаком толком, подскажите насколько данное решения кросбраузерно, стоит его исользовать

 

[mdss]

тогда можно проще

<input type="password" placeholder="Пароль">

 

[ramses21]

Можно для этого поля сразу поставить тип текст с необходимым вэлью, а потом отловить onkeyup и заменить атрибут type на password.
При обновлении страницы тип поля опять вернется и содержимое вэлью тоже.

 

[Obormot]

<input type="password" placeholder="Пароль">

Да, отличное решение, простое , но к сожалению IE вообще не знает то такое placeholder, опера только 11, только все версии хрома отлично работают!

отловить onkeyup

Это про js речь идет ?

 

[Savromat]

В IE с помощью метода onfocus подставить полю input type="password" не получится. Кроссбраузерно реализовать требуемое Вам можно разными способами, но так или иначе, без js не обойтись.

Есть вариант с использованием картинки с заданным текстом в бэкграунде поля, находящегося в "режиме" onblur, и последующей корректировкой этого свойства (background-image) при "переходе" в onfocus... Но на мой взгляд это слишком громоздко.

Более изящно будет прибегнуть к помощи jQuery (раз Вы говорите, что java-script на странице немало, то полагаю, что сама библиотека у Вас уже подключена). Вот набросал пробный вариантик:

<script type="text/javascript">
$(document).ready(function(){
    // Скрываем поле с type="password"
    $('#type_pass').hide()
    // При помещении курсора в поле с type="text", подменяем его на поле с type="password"
    $('#type_text').click(function(){
        $(this).hide();
        $('#type_pass').show().focus()
    });
});
</script>

<input value="Пароль" type="text" name="password" id="type_text" />
<input value="Пароль" type="password" onblur="if (value == '') {value='Пароль'}" onfocus="if (value == 'Пароль') {value =''}" name="password" id="type_pass" />

Здесь имеем 2 поля input с заданными типами (одно скрытое, одно видимое) и по клику в видимом поле подменяем его другим.
Конфликтовать тут с иными скриптами попросту нечему. Особой нагрузки на браузер не создаётся, страница не утяжелится. Это "коленочный" вариант... При желании можно развить.

 

[polyetilen]

может менять тип поля с текста на пароль при фокусе

<input type="text" size="#" name="password" id="#" class="f-input autoclear" value="Придумайте пароль..." require="true" datatype="require" onfocus="this.type='password';" />