как сделать подсказку пароля Jquery звездочками

Question

примера: http://jsfiddle.net/na2tD/

В настоящее время пароль не звездочки, как «тип» для текста поля пароля должны быть типа = «текст», поэтому он не может быть изменен на тип =» пароль ", который необходим, если я хочу звездочки. Как получить как подсказку jquery, так и звездочки, работающие вместе

Answer 1

Вы можете использовать новый атрибут HTML5, называемый placeholder. Не требуется Javascript!

<input type="password" name="password" placeholder="Enter password" size="20" /> 

Демо: http://jsfiddle.net/na2tD/8/

Answer 2

Посмотрите на этой странице GitHub. Я думаю, что это то, что вам нужно.

https://github.com/nachokb/jquery-hint-with-password

Answer 3

Это плохая реализация намекая. Прежде всего, если кто-то подает пустую форму, они фактически будут отправлять «Username» и «Password» в качестве параметров, и будет неприятно фильтровать их на стороне сервера.

Лучше просто идти с placeholder атрибута: http://jsfiddle.net/na2tD/6/

<input type="password" name="password" title="Password" size="10" placeholder="Password"/> 

EDIT:

И если вам это нужно для поддержки старых браузеров, которые не поддерживают атрибут html5 placeholder, вы можете добавить этот js: https://github.com/parndt/jquery-html5-placeholder-shim

Answer 4

Если вы не хотите использовать заполнитель HTML5, вы можете изменить тип ввода с помощью «обычного» JavaScript: input.type = 'password'. Посмотрите на http://jsfiddle.net/brunomsilva/na2tD/5/.

Answer 5

Используйте атрибут placeholder. Конечно, это не работает в IE, и есть много решений, чтобы преодолеть отсутствие поддержки IE. Большинство из них не очень хороши, особенно те, которые изменяют значение входного элемента для выполнения текста заполнителя. Этот подход является ошибочным и имеет проблемы с доступностью.

Лучшим подходом является использование техники, которая не изменяет значения ввода. Он должен работать автоматически с формами, которые уже используют атрибут placeholder без каких-либо дополнительных изменений в разметке. Техника, которую я использую, заключается в том, чтобы поместить метку за вход так, чтобы она показывалась через вход. Когда вход имеет фокус или значение, он получает фоновый цвет, чтобы скрыть метку-заполнителя.

Сначала я проверяю, поддерживает ли браузер placeholder. Этот код говорит нам, поддерживается ли заполнитель:

if (!("placeholder" in document.createElement("input"))) { 
    // placeholder is not natively supported 
} 

Если placeholder не поддерживается, я впрыснуть абсолютно позиционируется <label> перед каждым <input>, который имеет атрибут placeholder и добавить noplaceholder класс на вход, указывающий, что заполнитель не поддерживаемая на месте и что метка должна отображаться через вход. Я использую CSS для стилирования метки в соответствии с вводом и уменьшения непрозрачности ввода, чтобы ярлык показывался. Остальное - просто довольно простая обработка событий для добавления или удаления класса noplaceholder в зависимости от того, имеет ли вход фокус и/или значение.

Вот мой код.Отбросьте следующие CSS и JavaScript на существующую страницу, использующую атрибуты-заполнители, и она должна работать. CSS может потребовать небольшой настройки, чтобы заставить его работать на вашей странице.

Демо:http://jsfiddle.net/yjfvm/2/

CSS-:

input[placeholder], .placeholder { 
    font-family: Sans-Serif; 
    border: 1px solid #b2b2b2; 
    border-radius: 3px; 
    padding: 2px 4px; 
    vertical-align: middle; 
    font-size: 1em; 
    line-height: 1em; 
} 
.placeholder + input[placeholder].noplaceholder { 
    filter: alpha(opacity=100); 
    background-color: #fff; 
    border-color: #b2b2b2; 
} 
.placeholder + input[placeholder] { 
    position: relative; 
    filter: alpha(opacity=50); 
    border-color: #666; 
} 
.placeholder, label.placeholder { 
    border-color: #fff; 
    position: absolute; 
    margin-top: 1px; 
    margin-left: 0; 
    top: auto; 
} 

JavaScript:

if (!("placeholder" in document.createElement("input"))) { 
    $(function() { 
     $("input[placeholder]").each(function() { 
      $("<label>") 
       .attr("for", this.id) 
       .addClass("placeholder") 
       .text(this.getAttribute("placeholder")) 
       .insertBefore(this); 
      $(this).addClass("noplaceholder"); 
     }).on("keydown focus input", function() { 
      $(this).addClass("noplaceholder"); 
     }).on("change blur", function() { 
      if (!this.value) { 
       $(this).removeClass("noplaceholder"); 
      } 
     }).change(); 
     $("form").on("reset", function() { 
      setTimeout(function() { 
       $("input[placeholder]:not(:focus)").change(); 
      }, 0); 
     }); 
    }); 
}