使用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>