текстовое поле не проверяется как пустое, если текст введен, а затем удален - PullRequest
Новая
       28

текстовое поле не проверяется как пустое, если текст введен, а затем удален

1 голос
/ 07 июня 2011

У меня раздражающая проблема с текстом с водяными знаками для текстового поля.

что мне нужно, если пользователь щелкает текстовое поле, и в текстовом поле нет текста, который должен отображаться по умолчанию (например, поиск ...)

У меня есть эта функция, чтобы проверить это: 

document.getElementById("searchtextbox").onblur = function() {

if (document.getElementById("searchtextbox").value == "") {
     document.getElementById("searchtextbox").setAttribute("value", "Search...");
}

это прекрасно работает, если я просто нажму внутри и нажму. проблема возникает, когда я нажимаю внутри, ввожу текст и удаляю его, а затем нажимаю снаружи.

Я пытался сделать это с помощью Length == 0, value == null, value.trim () == "",! Value.match (/.+/), и ни один из них не возвращает true для этого случая. *

Ответы [ 2 ]

3 голосов
/ 07 июня 2011

Пожалуйста, рассмотрите возможность использования атрибута HTML5 placeholder . 

<input type="text" id="searchtextbox" placeholder="Search..." value="" />

Как указали многие люди из моего ответа, Internet Explorer не сильно заинтересован в отображении текста-заполнителя (какой сюрприз). Тем не менее, это более семантически для использования placeholder, а для обнаружения функций независимо от того, поддерживает браузер это или нет.

Вы можете выполнить обнаружение функций следующим образом (из diveintohtml5.ep.io ): 

function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

Если это неверно, вы можете использовать свой взлом Javascript placeholder.

ОБНОВЛЕНИЕ: Если вам нужна помощь в реализации, пожалуйста, обратитесь к HTML-текст заполнителя в текстовой форме .

Я также взглянул на ваш код и исправил его:

jsFiddle Demo 

document.getElementById("searchtextbox").onblur = function() {
    if (this.value == "") {
        this.value="Search...";
    }
}

Использование setAttribute не является правильным способом, вы не хотите устанавливать атрибут, но свойство live (.value). Ваше условие if действительно сработало, но изменение не отразилось.

2 голосов
/ 07 июня 2011

Как предположил Базмегакапа, рассмотрим атрибут placeholder.

Чтобы ответить на ваш вопрос, ваш код не работает, потому что вы используете setAttribute, в то время как пользователь только что изменил свойство value. Вместо использования setAttribute, попробуйте использовать .value = 'Search...'

...