Кнопка очистки поля ввода формы с использованием JQuery и JQTouch

Question

У меня есть сайт, построенный с использованием JQTouch, и вы хотите добавить маленькие крестики в поля ввода текста, чтобы очистить текст при печати.

Я пробовал подражать технике Google с их сайта Google google.com . Также я прочитал об этом подходе little 'x' in textfield input on the iphone in mobileSafari? ...

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

Я создал минимальный код, чтобы проверить это:

с JQTouch - http://hogtownconsulting.com/clearquery/index.html

без JQTouch (или любые другие библиотеки JS) - http://hogtownconsulting.com/clearquery/index-no-js.html

Я не уверен, что это взаимодействие с библиотекой JQTouch , что вызывает эти проблемы. Но версия без JQTouch кажется более восприимчивой к кранам на крестике. Любые предложения о том, как я могу получить эту функцию, работающую должным образом, будут высоко оценены. Спасибо, Patrick

Answer 1

Вы получите этот маленький X автоматически, если вы назовете свой тип ввода = поиск.

<input type=search name=s> 

Эта статья вам поможет. CSS Tricks for WebKit

Если вы не хотите, чтобы этот вход был типом = поиск, вам придется немного подделать его. 1. Создайте div и округлите его, используя css. 2. разместите свой вход там, и удалите оформление веб-кит, затенение и т. Д. 3. поместите SPAN с вашим X-изображением справа от ввода. добавьте onclick к этому изображению, которое очистит ваше поле.

<div><input type="text" id="thing"/><span onclick="clrField();"><img src="x.gif"/></span></div>