Кнопка «Очистить» для поля ввода формы с использованием JQuery и JQTouch - PullRequest
Новая
       8

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

2 голосов
/ 01 февраля 2010

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

Я пытался эмулировать технику Google с их iPhone на google.com. сайт. Также я читал об этом подходе здесь маленькая буква "x" при вводе текстового поля на iphone в mobileSafari? ...

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

Я создал минимальный код для проверки:

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

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

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

1 Ответ

4 голосов
/ 04 сентября 2010

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

<input type=search name=s>

Эта статья поможет вам много. CSS-хитрости для WebKit

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

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