У меня есть текст ввода:
<input name="Email" type="text" id="Email" value="[email protected]" />
Я хочу поставить значение по умолчанию, например "Какой ваш вопрос программирования?". в StackOverFlow, и когда пользователь нажимает на него, значение по умолчанию исчезает.
EDIT. Хотя это решение работает, я бы порекомендовал вам попробовать решение MvanGeest ниже, которое использует атрибут placeholder и javascript fallback для браузеров, которые еще не поддерживают его.
Если вы ищете Mootools, эквивалентную ответу JQuery в ответе MvanGeest, здесь один.
-
Вероятно, вы должны использовать события onfocus и onblur для поддержки пользователей клавиатуры, которые просматривают формы.
Вот пример:
<input type="text" value="[email protected]" name="Email" id="Email"
onblur="if (this.value == '') {this.value = '[email protected]';}"
onfocus="if (this.value == '[email protected]') {this.value = '';}" />
Для справки в будущем у меня есть, чтобы включить способ HTML5 для этого.
<input name="Email" type="text" id="Email" value="[email protected]" placeholder="What your programming question ? be specific." />
Если у вас есть документ HTML5 и браузер, совместимый с HTML5, это будет работать. Однако многие браузеры в настоящее время не поддерживают эту, поэтому, по крайней мере, пользователи Internet Explorer не смогут увидеть ваш заполнитель. Однако см. http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ (версия archive.org) для решения. Используя это, вы будете очень современны и совместимы со стандартами, а также обеспечите функциональность для большинства пользователей.
Кроме того, предоставленная ссылка является хорошо протестированным и хорошо разработанным решением, которое должно работать из коробки.
Это несколько чище, я думаю. Обратите внимание на использование свойства "defaultValue" для ввода:
<script>
function onBlur(el) {
if (el.value == '') {
el.value = el.defaultValue;
}
}
function onFocus(el) {
if (el.value == el.defaultValue) {
el.value = '';
}
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>
Используя jQuery, вы можете сделать:
$("input:text").each(function ()
{
// store default value
var v = this.value;
$(this).blur(function ()
{
// if input is empty, reset value to default
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
// when input is focused, clear its contents
this.value = "";
});
});
И вы можете использовать все это в настраиваемом плагине, например:
jQuery.fn.hideObtrusiveText = function ()
{
return this.each(function ()
{
var v = this.value;
$(this).blur(function ()
{
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
this.value = "";
});
});
};
Здесь вы можете использовать плагин:
$("input:text").hideObtrusiveText();
Преимущества использования этого кода:
Не-jQuery-подход:
function hideObtrusiveText(id)
{
var e = document.getElementById(id);
var v = e.value;
e.onfocus = function ()
{
e.value = "";
};
e.onblur = function ()
{
if (e.value.length == 0) e.value = v;
};
}
Введите следующие
внутри тега просто добавьте onFocus = "value = ''", чтобы ваш окончательный код выглядел следующим образом:
<input type="email" id="Email" onFocus="value=''">
В этом случае используется владелец события javascript onFocus().
Просто используйте тег placeholder на своем входе вместо value
мы можем сделать это, не используя js следующим образом, используя атрибут "placeholder" для html5 (текст по умолчанию исчезает, когда пользователь начинает вводить, но не просто щелчком)
<input type="email" id="email" placeholder="[email protected]">
см. это: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder
<input name="Email" type="text" id="Email" placeholder="enter your question" />
Атрибут placeholder указывает короткий подсказку, которая описывает ожидаемое значение поля ввода (например, примерное значение или краткое описание ожидаемого формата).
Короткий подсказка отображается в поле ввода до того, как пользователь вводит значение.
Примечание. Атрибут placeholder работает со следующими типами ввода: текстом, поиском, URL-адресом, телом, электронной почтой и паролем.
Я думаю, что это поможет.
Вот очень простой javascript. Это отлично работает для меня:
function sFocus (field) {
if(field.value == 'Enter your search') {
field.value = '';
}
field.className = "darkinput";
}
function sBlur (field) {
if (field.value == '') {
field.value = 'Enter your search';
field.className = "lightinput";
}
else {
field.className = "darkinput";
}
}
Зачем удалять значение? его полезно, но почему бы не попробовать CSS
input[submit] {
font-size: 0 !important;
}
Значение важно проверить и проверить ur PHP
Вот решение jQuery. Я всегда возвращаю значение по умолчанию, когда пользователь очищает поле ввода.
<input name="Email" value="What your programming question ? be specific." type="text" id="Email" value="[email protected]" />
<script>
$("#Email").blur(
function (){
if ($(this).val() == "")
$(this).val($(this).prop("defaultValue"));
}
).focus(
function (){
if ($(this).val() == $(this).prop("defaultValue"))
$(this).val("");
}
);
</script>
Я не видел таких простых ответов, как этот, поэтому, возможно, это поможет кому-то выйти.
var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }
Вот простой способ.
#animal представляет любые кнопки из DOM. #animal-value - это идентификатор ввода, который является целевым.
$("#animal").on('click', function(){
var userVal = $("#animal-value").val(); // storing that value
console.log(userVal); // logging the stored value to the console
$("#animal-value").val('') // reseting it to empty
});