Текстовое поле в фокусе, с загрузкой страницы, с текстом, который удаляется с типом - PullRequest
Новая
       7

Текстовое поле в фокусе, с загрузкой страницы, с текстом, который удаляется с типом

0 голосов
/ 04 ноября 2011

На моей странице есть простое текстовое поле с начальным текстовым значением ' Введите адрес электронной почты '. Когда страница загружается, я автоматически устанавливаю фокус на это поле, используя следующее: 

<body onLoad="document.emvForm.EMAIL_FIELD.focus()">

Я хотел бы сделать так, чтобы, когда пользователь начинает вводить текст в поле, он очищает текст, а не очищает текст в фокусе.

Как мне это сделать?

Ответы [ 4 ]

1 голос
/ 04 ноября 2011

Попробуйте следующее: 

<input type="text" id="textField" />

<script type="text/javascript">
    $(document).ready(function(){
        // Set Text to be Default //
        var txtVal = 'Enter Your Email Address';
        $('#textField').val(txtVal).focus();

        // On Focus //
        $('#textField').focus(function(){
            if ($(this).val() == txtVal) $(this).val('');
        });

        // on Blur //
        $('#textField').blur(function(){
            if ($(this).val() == '') $(this).val(txtVal);
        });
    });
</script>

Вот скрипка: http://jsfiddle.net/wpZ8n/

Надеюсь, это поможет!

0 голосов
/ 28 марта 2013

В современных (HTML5-совместимых) браузерах эту функциональность можно добавить, просто используя атрибут placeholder, как показано ниже: 

<input type="text" placeholder="Enter your Email" />

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

https://github.com/mathiasbynens/jquery-placeholder

(отметьте ответ на этот ответ: Заполнитель в IE9 , который также перечисляет другие различные способы сделать это в IE и дает сравнение в ответах)

0 голосов
/ 04 ноября 2011

Вам нужно будет использовать <span> или <label>, который вы поместите поверх простого текстового поля, а затем отслеживать, был ли какой-либо текст введен в поле ввода. Если это так, скрыть <span> или <label>

0 голосов
/ 04 ноября 2011

Используйте jQuery 

<input class="em" type="text" name="email" value="Enter your Email"/>

$(document).ready(function() {
    $(function() {
        $(".em").focus();
    });

    $(".em").keypress(function() {
          var val = $(this).val(); 
          if (val == 'Enter your Email') {
              $(this).val('')
          }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...