Блог

Главная - Вопросы по программированию - Стиль ввода текста в простой форме HTML

Стиль ввода текста в простой форме HTML

#html #css

#HTML #css

Вопрос:

Эй, ребята, мне просто интересно, как это сделать в типе ввода текста, когда пользователь не нажал на флажок. покажите «Редактировать имя» в поле со слегка серым цветом шрифта. Когда пользователь нажимает на поле, оно меняется на «John Doe», а затем они могут редактировать его, а затем отправлять

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

Ответ №1:

Если вы используете HTML5, вам подойдет атрибут Placeholder.

Если нет, просто возьмите один из множества сценариев водяных знаков для jQuery или Javascript (например, jQuery Watermark.

Редактировать

Один ручной способ делать то, что вы хотите, с помощью jQuery и CSS:

 // CSS 
#name{color:#ccc;}

// HTML
<input type="text" name="name" id="name" size="30" value="Edit Name" />

// jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#name').bind('focus', function() {
    if ($(this).val() == 'Edit Name') {
      $(this).val('John Doe').css('color', '#000');
    }
  });
});
</script>

Поместите jQuery раздел в приведенном выше коде в <head> раздел вашего HTML-документа, и все готово.

Комментарии:

1. <тип ввода = «текст» имя =»имя» идентификатор = «имя» размер = «30» значение = «Ястребы» заполнитель =»Название команды» /> не работает, поскольку для него уже установлено значение. мне нужно, чтобы заполнитель отображался до щелчка, после чего отображается значение

2. Большое вам спасибо, но я никогда раньше не использовал jQuery, как мне включить его в свой скрипт? Теги <script>?

3. Спасибо! я поместил jquery в свои теги <head> внутри тегов <script, которые вы опубликовали, но он не работает? 🙁

4. Разобрался: D спасибо, как бы мне включить переменную php в часть John Doe?

5. Когда вы выводите <input> свой тег, просто используйте value="<?php echo $the_value; ?>"

Ответ №2:

Новые браузеры поддерживают атрибут HTML5 placeholder , который можно использовать следующим образом:

 <input type="text" value="" placeholder="Edit Name">

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

В Dive into HTML5 есть таблица, какие версии браузера поддерживают его изначально, если вам интересно.

Комментарии:

1. <тип ввода = «текст» имя =»имя» идентификатор = «имя» размер = «30» значение = «Ястребы» заполнитель =»Название команды» /> не работает, поскольку для него уже установлено значение. мне нужно, чтобы заполнитель отображался до щелчка, после чего отображается значение

Метки: