Фокус ввода JavaScript

Question

<form id="commentform" method="post" action="wp-comments-post.php">
    <input type="text" aria-required="true" tabindex="1" size="22" value="" 
       id="author" name="author">
</form>

Я установил значение по умолчанию "посетитель" в поле ввода.Когда фокус находится в текстовом поле или в него входит mouose, я хочу скрыть строку «посетитель» и показать ее, когда она теряет фокус или выходит из окна.

Answer 1

Похоже, вы используете WordPress, поэтому у вас есть библиотека jQuery на вашем сайте.

Вы можете использовать мой плагин jQuery для достижения этой цели.

Пример

jQuery

$('#author').inputLabel({
   customLabel: 'Visitor'
});

В этом случае мне пришлось самому указать метку, но плагин работает без этого, находя соответствующий элемент labelна input, который должен присутствовать для доступности.

jsFiddle .

Answer 2

Попробуйте использовать атрибут-заполнитель HTML5:

<input type="text" aria-required="true" tabindex="1" size="22"
    placeholder="visitor" id="author" name="author">

Хотя поддержка браузера еще не на 100%, это даст вам стандартный способ достичь того, чего вы пытаетесь достичь, не проходя через ненужныеhoops.

Другая вещь, которую вы можете попробовать, это наложить элемент ввода поверх некоторого текста и сделать его прозрачным / полупрозрачным, когда он не в фокусе, и непрозрачным, когда он в фокусе / заполнен.

На сегодняшний день, Страница входа Tumblr использует этот трюк:

<div class="input_wrapper" id="">
    <label for="user_password">Password</label>
    <input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>

С помощью магии CSS это становится:

Answer 3

Хотя я бы тоже использовал jQuery или CSS и псевдокласс (: focus) ....

Вот простое решение JS, которое делает именно то, что вам нужно.Опять же, я бы не рекомендовал этот подход для более чем одного или двух полей ввода.

<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>

Answer 4

Ответ Атес Горал выглядит очень интересно.пожалуйста, попробуйте первый выстрел.это альтернатива, если вы не хотите потеть ..:)
Я бы предложил использовать плагин водяных знаков.Есть много доступных.
использовал этот плагин раньше.работал нормально.дает вам хороший контроль.
плагин требует JQuery

Answer 5

Если вы используете HTML 5, попробуйте следующее:

<script type="text/javascript">
var prompt="visitor";       
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
            if(txt.value==''){
                txt.value=prompt;
            }
        }
</script>