<ons-input> clear button

[jamal]

Several mobile frameworks have a clear button that clear text if there is any text in the input element. This is a very useful feature to have.
Can this be implemented in Onsen UI?

For example jQueryMobile provide this option:

<input data-clear-btn="true" data-mini="true"  id="text-5" value="" type="text">

Note: data-clear-btn=“true”

Here is a jsFiddle demo: http://jsfiddle.net/kqgkta8r

Also, your Monaca for iOS has this feature:

Note: HTML5 has a input type=“search” but it does not work on mobile.

[Fran Diox]

@jamal Try with type="search". It can even be customized with -webkit-search-cancel-button selector.

Edit: Didn’t see your note :sweat_smile: It works for me on Android but looks like there is a bug or a style change on iOS… https://stackoverflow.com/questions/35583503/input-type-search-no-longer-shows-cancel-button-x-under-ios

[jamal]

@Fran-Diox, well it looks like Apple is slow at fixing things more than later and 2 major version of iOS.

How come you have it in the Monaca Debugger program for iOS? Should I assume you developed it in a different framework?

[Fran Diox]

@jamal Not sure about it since I didn’t make the debugger myself but it just looks like a custom div. I’ll discuss with the team about adding this following android and ios specs.

[jamal]

@Fran-Diox, that would be awesome! Thanks!

[jamal]

BTW, ionic has this feature and other useful properties.

<ion-input placeholder=“Clear Input” clearInput></ion-input>

https://ionicframework.com/docs/api/components/input/Input/

If course, I would :green_heart: to see it in OnsenUI