Переключатель ввода текста

Question

Переключатель ввода текста

0

Я пытаюсь создать текстовый ввод, где отображается значение, то есть "Имя клиента", а затем, когда он щелкнут, он исчезает, а затем, если ничего не было напечатано и пользователь не нажал "Имя клиента", снова отображается. Я достиг этого, но, если пользователь что-то вводит, а затем меняет свое мнение, удаляет текст, который они только что вводят, а затем отключается, "Имя клиента" больше не появляется. Я был бы очень благодарен за помощь, пожалуйста.

$(function() {
    $('#InvClientsName').click(function(){
        if( $('#InvClientsName').attr("value") == "Client Name" ) {
            $('#InvClientsName').attr("value", "");
         }
    });
    $('#InvClientsName').outside('click', function(e) {
        if( $('#InvClientsName').attr("value") == "" ) {
            $('#InvClientsName').attr("value", "Client Name");
        }
    });
});

user3618465 09 май 2014, в 00:57

Источник

2

Вы не хотели бы использовать вместо этого placeholders ? - w3schools.com/tags/att_input_placeholder.asp
Fizzix 08 май 2014, в 23:03
0

Является ли #InvClientsName уникальным и статическим элементом или он используется несколько раз и создается динамически?
DevlshOne 08 май 2014, в 23:03

Теги:

jquery

1 ответ

Ещё вопросы

Вы не хотели бы использовать вместо этого placeholders ? - w3schools.com/tags/att_input_placeholder.asp
Является ли #InvClientsName уникальным и статическим элементом или он используется несколько раз и создается динамически?

Robbie Averill · Answer 1 · 2014-05-08T21-06-00.000Z

Вам нужно рассмотреть несколько вещей:

Когда пользователь нажимает на ваше поле (событие focusin), текст должен быть пустым, но это, вероятно, должно произойти только в том случае, если они не помещают какой-либо пользовательский текст в поле уже
Когда пользователь выйдет из поля (событие focusout), текст должен вернуться к тексту по умолчанию, но только если текст не пуст

Итак, вы можете попробовать следующее:

HTML:

<input type="text" id="InvClientsName" value="Hello world!">

JQuery:

var defaultText = $('#InvClientsName').val(); // grabs the default text field value on page load

$('#InvClientsName').focusin(function() { // when entering the text field by click or tabbing
    if($(this).val().trim() == defaultText) // if it default text
        $(this).val(''); // blank it out
});

$('#InvClientsName').focusout(function() { // when leaving the text field
    if($(this).val().trim() == '') // if the field is blank
        $(this).val(defaultText); // set the value to default
});

Однако это поведение очень похоже на атрибут placeholder, и вы можете просто заменить весь этот процесс:

<input type="text" id="InvClientsName" value="" placeholder="Hello world!">

Здесь скрипка, чтобы вы могли видеть различия.

+1 за включение решения исходного вопроса, вместе с отличной альтернативой заполнителей.