Как использовать JavaScript для создания маски текстового поля?

Question

Я - новичок в JavaScript. Я хочу добавить тот же эффект, что и в текстовых полях этой веб-страницы на моей собственной странице ... Может ли кто-нибудь помочь мне в том, как это сделать или где его изучить.

Я хочу, чтобы мои текстовые поля, чтобы показать, что должны быть там написано, но это изменится, как только я что-то в нем писать ..

Другое дело, что небольшое всплывающее окно блока появляется при нажатии на текстовое поле, которое описывает, что и как писать в нем ... например, пароль должен быть буквенным числом ... или длиной более 6 символов.

Answer 1

Посмотрите на JQuery:

$('#textarea').onKeyup(
    function(){ 
     $('div#mydiv').innerHTML($(this).val()); 
    } 
); 

Вот начало. :)

Answer 2

Если вы хотите сделать это в доступной форме (и вы должны):

Если JS доступен, позиционировать прозрачного вход над этикеткой внутри контейнера и установите переключатель в прозрачность входа на основе его значения при времени загрузки документа и всякий раз, когда фокус входит в лист элементов.

Я создал .

Что касается второй части вопроса. Это очень похоже. Просто введите другую метку рядом с входом и переключите ее видимость, когда фокус входит или уходит, игнорируя значение ввода. Я бы не потрудился с этим, хотя предварительное уведомление о требованиях приятно!

Answer 3

Вы можете взглянуть на ОМП редактор уценки:

http://wmd-editor.com/

Это именно то, что вы ищете.

Answer 4

HTML поле ввода

<input type="text" name="name" id="name" value="" /> 

Javascript

function hint() { 
    var elem = document.getElementById('name'); // get element 

    elem.value = "Enter Name"; // fill element with value 

    elem.onfocus = function() { // if the user focuses 
    if (elem.value === "Enter Name") { // if there is default text 
     elem.value = ""; // clear it 
    } 
    } 

    elem.onblur = function() { // if user removes focus on field 
    if (elem.value === "") { // if the field is empty 
     elem.value= "Enter Name"; // fill in a default value 
    } 
    } 
} 

window.onload = hint; // call the function when the page has loaded