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

Question

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

我试着从他们的google.com iPhone 网站模拟谷歌的技术。我也读过关于这个方法在这里 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的版本似乎更能响应十字按钮上的点击。任何建议，我怎样才能得到这个功能 妥善将非常感激。谢谢你，帕特里克

Answer 1

如果你的输入类型=搜索名称，你会自动得到这个小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>