Подсказка поля ввода HTML

Я хочу предоставить пользователю подсказку о том, что ему нужно для ввода в текстовое поле. Однако, когда я устанавливаю значение, он не исчезает, как только пользователь нажимает на текстовое поле. Как вы можете заставить его исчезнуть?

<form action="input_password.htm">
  <p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>

Ответ 1

Вам нужно прикрепить событие onFocus к полю ввода через Javascript:

<input type="text" onfocus="this.value=''" value="..." ... />

Ответ 2

С немного javascript

<input value="Enter username.." onfocus="if (this.value == 'Enter username..') this.value=''" ... />

HTML5 имеет хороший атрибут для этого, называемый placeholder

<input placeholder="Enter username.." ... />

но выше не поддерживается в старых браузерах.

Ответ 3

лучший способ дать подсказку - заполнить следующим образом:

<input.... placeholder="hint".../>

Ответ 4

Я думаю, что для вашей ситуации, простой и простой для вашего ввода html, вы можете вероятно, добавьте заголовок атрибута

<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">

Ответ 5

С HTML5 теперь вы можете использовать атрибут placeholder следующим образом:

<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

http://www.w3schools.com/tags/att_input_placeholder.asp

Ответ 6

Это именно то, что вы хотите

$(document).tooltip({ selector: "[title]",
                              placement: "top",
                              trigger: "focus",
                              animation: false});

<form id="form">
    <label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
    <input id="myinput1" type="text" title="This tooltip persists" />
    <input id="myinput2" type="text" title="This one also" />
</form>

Ответ 7

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

шаг -1: добавлен плагин jquery.placeholder.js

Шаг -2: напишите нижеприведенный код в своей области.

$(function () {
       $('input, textarea').placeholder();
});

И теперь я могу видеть заполнители в вводах!

Ответ 8

Если вы имеете в виду как текст в фоновом режиме, я бы сказал, что вы используете метку с полем ввода и, конечно, поместите ее на вкладке с помощью CSS. С помощью JS вы теряете метку, когда вход принимает значения и исчезает, когда вход пуст. Таким образом, пользователь не может представить описание, случайно или намеренно.

Ответ 9

Определить текст всплывающей подсказки

<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">

Инициализировать и настроить script

<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>