Текст в поле HTML исчезает при нажатии?

Я могу легко создать поле ввода html, в котором уже есть текст. Но когда пользователь нажимает на поле ввода, текст не исчезает, а остается там. Затем пользователю необходимо вручную удалить текст для ввода. Как создать поле ввода, где, когда пользователь нажимает на поле ввода, текст исчезает?Текст в поле HTML исчезает при нажатии?

источник

2009-10-26 HollerTrain

Как насчет чего-то подобного?

<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">

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

источник

2009-10-26 17:36:57 mecsco

Для достижения этой цели, вы можете использовать два события OnFocus и ONBLUR:

<input type="text" name="theName" value="DefaultValue" 
    onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}" 
    onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}" 
    style="color:#BBB;" />

источник

2009-10-26 17:53:11 BitDrink

и что, если пользователь не входит в Vlue, будет ли он передать пустое значение или значение defaul? мой случай использования также такой же, как это, но я хочу, когда пользователь не вводит ничего пустого значения, следует назначить, как мы это сделаем? Любое предложение? И не использовать атрибут placholder. – mahesh

@mahesh. Что вы можете сделать, это добавить фоновое изображение с нужным текстом, написанным на нем, и добавить onClick event listener, который делает изображение невидимым. –

это БОЛЬШОЕ решение, если вам все еще нужно поддерживать IE9! Благодаря! –

139

То, что вы хотите сделать, это использовать HTML5 атрибут placeholder, который позволяет установить значение по умолчанию для ввода:

<input type="text" name="inputBox" placeholder="enter your text here">

Это должно обеспечить то, что вы ищете. Однако будьте осторожны, поскольку атрибут placeholder не поддерживается в Internet Explorer 9 и более ранних версиях.

источник

2011-02-22 11:05:14 Nayish

HTML5 решает эту проблему для нас с атрибутом placeholder. Не нужно снова управлять событиями. Хороший ответ – Ron

входной атрибут placeholer не поддерживается в IE9 и IE8 ... для получения более подробной информации http://caniuse.com –

Есть ли способ, чтобы заполнитель исчез, когда пользователь начинает вводить текст, но не исчезает, когда поле 'сосредоточенный.'? –

попробуйте этот один из.

<label for="user">user</label> 
<input type="text" name="user" 
onfocus="if(this.value==this.defaultValue)this.value=''"  
onblur="if(this.value=='')this.value=this.defaultValue" 
value="username" maxlength="19" />

надеюсь, что это поможет.

источник

2012-05-08 13:10:35

и что, если пользователь не вводит значение vlue, он будет передавать пустое значение или значение defaul? мой случай использования также такой же, как это, но я хочу, когда пользователь не вводит ничего пустого значения, следует назначить, как мы это сделаем? Любое предложение? И не использовать атрибут placholder – mahesh

Это так просто, я считаю, что решение, которое должно решить все ваши проблемы:

<input name="myvalue" id="valueText" type="text" value="ENTER VALUE">

Это ваша кнопка представляет:

<input type="submit" id= "submitBtn" value="Submit">

затем положить эту маленькую JQuery в файле JS:

//this will submit only if the value is not default 
$("#submitBtn").click(function() { 
    if ($("#valueText").val() === "ENTER VALUE") 
    { 
     alert("please insert a valid value"); 
     return false; 
    } 
}); 

//this will put default value if the field is empty 
$("#valueText").blur(function() { 
    if(this.value == ''){ 
     this.value = 'ENTER VALUE'; 
    } 
}); 

//this will empty the field is the value is the default one 
$("#valueText").focus(function() { 
    if (this.value == 'ENTER VALUE') { 
     this.value = ''; 
    } 
});

И он также работает и в старых браузерах. Кроме того, он может быть легко преобразован в обычный javascript, если вам нужно.

источник

2013-07-11 08:48:27

Спасибо, что он работает на IE9, который мы должны поддерживать.Поэтому я не мог использовать вещь-заполнитель. Чтобы сохранить значение в текстовом поле в одном месте, я использовал jQuery, чтобы установить значение в поле на готовом документе. $ (документ) .ready (функция() { \t/* установить значение поиска поле ввода при загрузке документа */ \t $ ('# valueText') знач ("Введите значение");. } – atsurti

Простой, как это: <input type="text" name="email" value="e-mail..." onFocus="this.value=''">

источник

2013-09-03 10:27:44

Текст в поле HTML исчезает при нажатии?

ответ

Смежные вопросы