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

Тема в разделе "Верстка", создана пользователем Obormot, 5 фев 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Obormot

    Obormot Постоялец

    Регистр.:
    10 янв 2012
    Сообщения:
    88
    Симпатии:
    2
    Есть форма ввода пароля, к ней подключен JS скрипт autoclear т.е. содержимое поля, value очищается после того как щелкаешь по полю.

    Задача вставить в поле input type="password" добавить value например "Придумайте пароль.."
    Соответствено если написать так:
    Код:
     <input type="password" size="#" name="password" id="#" class="f-input autoclear" value="Придумайте пароль..." require="true" datatype="require" />
    То в поле показваются кружки , и очищаются после клика.

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

    dmx

    Регистр.:
    22 июн 2011
    Сообщения:
    681
    Симпатии:
    582
    В любом случае будет закрытым. Ставь type="text"
     
  3. Obormot

    Obormot Постоялец

    Регистр.:
    10 янв 2012
    Сообщения:
    88
    Симпатии:
    2
    А как тогда при type="text" скрыть вводимые символы ?
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
  5. Obormot

    Obormot Постоялец

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

    Насколько я понял есть решения в 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 не знаком толком, подскажите насколько данное решения кросбраузерно, стоит его исользовать :)
     
  6. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    тогда можно проще
    HTML:
    <input type="password" placeholder="Пароль">
     
  7. ramses21

    ramses21 Постоялец

    Регистр.:
    20 июл 2008
    Сообщения:
    107
    Симпатии:
    16
    Можно для этого поля сразу поставить тип текст с необходимым вэлью, а потом отловить onkeyup и заменить атрибут type на password.
    При обновлении страницы тип поля опять вернется и содержимое вэлью тоже.
     
  8. Obormot

    Obormot Постоялец

    Регистр.:
    10 янв 2012
    Сообщения:
    88
    Симпатии:
    2
    Да, отличное решение, простое , но к сожалению IE вообще не знает то такое placeholder, опера только 11, только все версии хрома отлично работают!
    Это про js речь идет ?
     
  9. Savromat

    Savromat Писатель

    Регистр.:
    18 мар 2012
    Сообщения:
    8
    Симпатии:
    3
    В 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>
    HTML:
    <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 с заданными типами (одно скрытое, одно видимое) и по клику в видимом поле подменяем его другим.
    Конфликтовать тут с иными скриптами попросту нечему. Особой нагрузки на браузер не создаётся, страница не утяжелится. Это "коленочный" вариант... При желании можно развить.
     
  10. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    может менять тип поля с текста на пароль при фокусе
    HTML:
    <input type="text" size="#" name="password" id="#" class="f-input autoclear" value="Придумайте пароль..." require="true" datatype="require" onfocus="this.type='password';" />