Текстовый ввод с описательным текстом
-
03-07-2019 - |
Вопрос
Мне было интересно, есть ли простой способ с помощью JavaScript (включая JQuery, который мы используем на сайте) для ввода описательного текста в текстовый ввод до тех пор, пока пользователь не щелкнет его, чтобы ввести свой собственный текст.
Например, я хотел бы поместить слово «Поиск» в текстовый ввод (желательно более светлого цвета, чем реальный ввод), пока пользователь не щелкнет ввод, после чего он исчезнет и позволит им вводить условия поиска.
Однако я не хочу, чтобы слово «Поиск» было значением текстового ввода, потому что в некоторой степени важно, чтобы пользователь мог искать слово для поиска.
Я думал об абсолютном позиционировании элемента <p> с поиском слов над входными данными и скрывании его при нажатии на него (или входные данные).
Что вы думаете?это ужасное заблуждение?
Решение
Недавно я столкнулся с Плагин примера формы jQuery это делает именно то, что вы хотите.Страница проекта на GitHub: здесь.С помощью этого плагина вы можете отобразить значение заполнителя, которое исчезнет при нажатии, всего лишь с помощью этого:
$('input#search').example('Search');
Другие советы
Вы можете установить начальное значение ввода поиска «Поиск», а затем добавить прослушиватель onClick, чтобы удалить его.
$("input.search-term").one("click", function() { $(this).removeAttr("value"); });
Это не повлияет на способность пользователя искать «поиск». Это гораздо более чистый подход, чем пытаться внести <p>
или <label>
элемент над входом.
РЕДАКТИРОВАТЬ: Вы абсолютно правы: удаление значения при каждом клике — это плохой UX.Вот что я получаю за быстрый ответ.:) Обновлено, чтобы удалить только начальное значение.
Вы можете проверить это:http://www.newmediacampaigns.com/page/nmcformhelper
По сути, HTML 5 поддерживает заполнитель атрибут для входных элементов:
<input type="text" placeholder="Your browser supports placeholder text" size=38>
WebKit (Chrome и Safari) сейчас поддерживает это, но для других браузеров, таких как Firefox и IE, вы можете использовать этот сценарий для имитации эффекта с помощью Javascript, когда браузер не поддерживает функцию HTML 5.
В течение многих лет существовал популярный «проект», известный как labels.js, первоначально написанный Аароном Будманом из старого сайта youngpup.net.Идея все еще существует, и существует версия jQuery, даже (демо №4).
Однако я не хочу, чтобы слово «Поиск» было значением текстового ввода, потому что в некоторой степени важно, чтобы пользователь мог искать слово для поиска.
В этом случае вы можете использовать фоновое изображение при вводе текста.Вы можете определить в CSS, что :focus не должен иметь фона и что он должен быть у нефокусированного объекта.Это решение работает, даже если JavaScript отключен.
Обновлять:Протестировано и работает с FF, Opera и Chrome, но не с IE, поскольку IE не поддерживает :focus, но IE поддерживает фоновое изображение, поэтому, если текст светло-серый, это не должно быть проблемой.И вы всегда можете использовать jquery, чтобы изменить класс поля ввода.
Я недавно искал это решение и наткнулся этот
/**
* @author Remy Sharp
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
*/
(function ($) {
$.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur';
}
return this.each(function () {
// get jQuery version of 'this'
var $input = $(this),
// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = $(this.form),
$win = $(window);
function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass);
}
}
// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
$input.val(title).addClass(blurClass);
}
}).focus(remove).blur(); // now change all inputs to title
// clear the pre-defined text when form is submitted
$form.submit(remove);
$win.unload(remove); // handles Firefox's autocomplete
}
});
};
})(jQuery);
$(function(){
// find all the input elements with title attributes
$('input[title!=""]').hint();
});
Я бы сделал что-то вроде этого в jQuery:
$("input.searchterm").click(function() {
var $input = $(this);
if ($input.val() == "enter search term") $input.val("");
};
Таким образом, пользователи не потеряют то, что они набрали ранее, при повторном нажатии.Значение будет очищено только в том случае, если это значение по умолчанию, которое вы назначаете полю ввода.
Для справки, этот метод часто называют водяные знаки.