使用JQuery和JQTouch清除表单输入字段的按钮

时间:2010-02-01 11:47:19

标签: javascript jquery forms jqtouch

我有一个使用JQTouch构建的网站,并希望添加小十字架 文本输入字段中的按钮,用于清除按下的文本。

我尝试过google.com iPhone上的Google技术 现场。我也在这里读到了这种方法 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,

1 个答案:

答案 0 :(得分:4)

如果您将输入类型命名为= search,则会自动获得小X.

<input type=search name=s>

本文将为您提供充足的帮助。 CSS Tricks for WebKit

如果您不希望输入为type = search,那么您将不得不伪造一下。 1.创建一个div并使用css将其四舍五入。 2.将您的输入放在那里,并删除webkit装饰,阴影等。 3.将带有X图像的SPAN放在输入的右侧。为该图像添加一个onclick,清除你的字段。

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