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

【问题标题】：Clear button for form input field using JQuery and JQTouch使用 JQuery 和 JQTouch 清除表单输入字段的按钮
【发布时间】：2010-02-01 11:47:18
【问题描述】：

我有一个使用 JQTouch 构建的网站，想添加小十字文本输入字段中的按钮可在按下时清除文本。

我尝试在他们的 google.com iPhone 上模仿 Google 的技术地点。我也在这里读到过这种方法 little 'x' in textfield input on the iphone in mobileSafari?...

我有这个部分工作。但是是否以及何时按下十字按钮注册似乎不可靠。

我创建了最少的代码来测试这个：

我不确定这是与 JQTouch 库的交互这导致了这些问题。但是没有 JQTouch 的版本似乎对点击十字按钮更敏感。有关如何使此功能正常工作的任何建议将不胜感激。谢谢你，帕特里克

【问题讨论】：

【解决方案1】：

如果您将输入类型命名为 = 搜索，您会自动获得那个小 X。

<input type=search name=s>

这篇文章会给你很多帮助。 CSS Tricks for WebKit

如果您不希望该输入成为 type = 搜索，那么您将不得不稍微伪装一下。 1.创建一个div并使用css对其进行四舍五入。 2.把你的输入放在那里，去掉webkit装饰，阴影等。 3. 将带有 X 图像的 SPAN 放在输入的右侧。向该图像添加一个 onclick 以清除您的字段。

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

【讨论】：