javascript - Clear button for form input field using JQuery and JQTouch - Stack Overflow

admin管理员组

文章数量:1425142

I have a site built using JQTouch and want to add the little cross buttons within text input fields to clear out text on press.

I've tried emulating Google's technique from their google iPhone site. Also I've read about that approach over here little 'x' in textfield input on the iphone in mobileSafari?...

I have this partially working. But whether and when a press on the cross button is registered seems unreliable.

I've created minimal code to test this:

with JQTouch - .html

without JQTouch (or any other JS libraries) - .html

I'm not certain that it's an interaction with the JQTouch library that's causing these problems. But the version without JQTouch does seem more responsive to taps on the cross button. Any suggestions on how I can get this feature working properly would be much appreciated. Thank you, Patrick

I have a site built using JQTouch and want to add the little cross buttons within text input fields to clear out text on press.

I've tried emulating Google's technique from their google. iPhone site. Also I've read about that approach over here little 'x' in textfield input on the iphone in mobileSafari?...

I have this partially working. But whether and when a press on the cross button is registered seems unreliable.

I've created minimal code to test this:

with JQTouch - http://hogtownconsulting./clearquery/index.html

without JQTouch (or any other JS libraries) - http://hogtownconsulting./clearquery/index-no-js.html

I'm not certain that it's an interaction with the JQTouch library that's causing these problems. But the version without JQTouch does seem more responsive to taps on the cross button. Any suggestions on how I can get this feature working properly would be much appreciated. Thank you, Patrick

• javascript
• jquery
• forms
• jqtouch

Share Improve this question Follow edited May 23, 2017 at 12:19 CommunityBot 111 silver badge asked Feb 1, 2010 at 11:47 Patrick DinnenPatrick Dinnen 41555 silver badges66 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You get that little X automatically if you name your input type = search.

<input type=search name=s>

This article will help you plenty. CSS Tricks for WebKit

If you don't want that input to be a type = search, then you will have to fake it out a bit. 1. create a div and round it using css. 2. put your input in there, and remove webkit decoration, shading etc. 3. put a SPAN with your X image in to the right of the input. add an onclick to that image which clears your field.

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

本文标签： javascriptClear button for form input field using JQuery and JQTouchStack Overflow