Есть ли что-то готовое для кнопки "Очистить" в текстовом поле поиска?

Ответ 1

Нет ничего из коробки, но легко создать что-то вроде этого, не используя лишний HTML, некоторую магию CSS и jQuery для привязки событий.

Я добавил немного HTML, немного CSS и самый маленький бит Javascript с прокомментированным кодом, который вы можете реализовать, чтобы он работал как ожидалось.

Итоговый код

В моем примере используется этот HTML

<input type="text" name="search" id="search" value="I can be cleared" /><!--
--><a href="search/clear" id="clear">Clear results</a>

Если вы помещаете якорный тег сразу после ввода, вы можете легко опустить комментарий, который используется для удаления места между встроенными элементами.

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

Для остальной части кода просто проверьте пример JSFiddle.

Ответ 2

Существует еще один более гибкий "визуальный трюк", который вы можете использовать. Вы можете поместить текстовое поле без рамки внутри div с границей, тогда вы можете поместить все, что хотите, в текстовое поле, и оно будет отображаться внутри текстового поля.

Вот пример:

Вот окончательная разметка, обратите внимание, что этот пример использует и расширяет рамки Bootstrap:

<div class="composite-input">
    <span class="focus-input">Filter:</span> 
    <input type="text" /> 
    <span>×</span>
</div>

Для полного кода проверьте следующее сообщение: http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html