How to add a clear button 'X' to an Ember.TextField?

1

I’ve created a content filter view by extending Ember.TextField and I’d like to have a little X appear in the right side of the field when there is content in that field, and when clicked, will clear the field contents.

What’s a good way to do that?

2

check this out Addepar | Open Source , i guess you are trying to do something similar

3

Those are some nice components, but it’s not quite what I’m trying to do.

I just found the clearsearch jquery plugin and it seems to be working pretty well. https://github.com/waslos/jquery-clearsearch

4

Instead of using a jQuery plugin, I would add a “clear” action that sets the property bound to your TextField to the empty string. Here’s an example wrapping the functionality in an {{input-with-clear}} component: Clear action in text input field - JSFiddle - Code Playground

2 Likes
5

How would you prevent the text from going underneath the clear button?

6

@rox163 - The best way to avoid the text from going behind the clear button is apply padding to the inner text content. For example, try putting padding-right: 25px on the text box. Hope this helps!

7

That’s perfect! Thanks!

Roxanne

...

On Mar 10, 2016, at 6:44 PM, Luc noreply@emberjs.com wrote:

TrailHacker March 10 @rox163 - The best way to avoid the text from going behind the clear button is apply padding to the inner text content. For example, try putting padding-right: 25px on the text box. Hope this helps!

Visit Topic or reply to this email to respond

In Reply To

rox163 March 10
How would you prevent the text from going underneath the clear button? Visit Topic or reply to this email to respond

To stop receiving notifications for this particular topic, click here. To unsubscribe from these emails, change your user preferences

8