Подсказка к полю ввода HTML - PullRequest
Новая
       14

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

29 голосов
/ 08 июня 2011

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

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

Ответы [ 9 ]

95 голосов
/ 08 июня 2011

С небольшим количеством javascript 

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

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

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

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

23 голосов
/ 08 июня 2011

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

<input type="text" onfocus="this.value=''" value="..." ... />
16 голосов
/ 18 сентября 2013

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

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

13 голосов
/ 08 июня 2011

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

<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
9 голосов
/ 10 июля 2014

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

<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

3 голосов
/ 20 октября 2015

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

$(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>

[ 1010 * исх *]

2 голосов
/ 24 декабря 2013

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

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

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

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

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

0 голосов
/ 08 июня 2011

Определить текст подсказки 

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

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

<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>
0 голосов
/ 08 июня 2011

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

...