Forum | Appery.io

Hi !

Is it possible to have a clear button inside a text box?

This is described and with a demo here:

http://stackoverflow.com/questions/28...

Theres already a control in Tiggzi for this that maybe could be modified? Im thinking of the the Mobile Search bar from the component palette.

This topic could already have been answered elsewhere in the forum but i couldn't find it (searched for the "clear" keyword and similar).

best regards

Ole Henrik Oftedal
Timeflex Systemer AS
http://www.timeflex.com
http://www.timeflex.no

Hello!

Unfortunately you can't add clear button to the Mobile Search bar. Here is a jqm Feature-Requests https://github.com/jquery/jquery-mobi... that was closed a year ago and was added to backlog https://github.com/jquery/jquery-mobi...

No problem. Great to know that some day it will arrive.

Thanks for a super product and a super support staff!!!!

Hi again!
(6 month later)

Will this be possible in the future in Tiggzi?

It seems to have changed in a later JQM build:

http://jquerymobile.com/test/docs/for...

Ole

Hi again!

Is this possible in the new HTML5 App builder ?

I dont think this is possible in the old builder.

Ole

Hello! Create JS with the next code:

code$(document).ready(function() {
$('input&#46;deletable')&#46;wrap('<span class="deleteicon" &#47;>')&#46;after($('<span&#47;>')&#46;click(function() {
$(this)&#46;prev('input')&#46;val('')&#46;focus();
}));
});/code

Create CSS

codespan&#46;deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http:&#47;&#47;cdn&#46;sstatic&#46;net&#47;stackoverflow&#47;img&#47;sprites&#46;png?v=4') 0 -690px;
cursor: pointer;
}
span&#46;deleteicon input {
padding-right: 16px;
}/code

Then add Input component on screen and set its class name to Class Name = deletable

Hi again!

Thank you so much. This is so cool!!!
I've tested it both in the old and the new builder. Works perfect

Ole

Hi again!

Today I have made a page2 in this app and this page has also some input components.

When I use the same technique (setting class name to "deletable" on the input component) in page 2, I no longer get a clear button inside.

What can I do to make this possible? On the startpage it works perfect as always.

Ole

Hi - you have added a class name only or something else on page 2?

Just the class name. I also thought about that and I have tried to put both pages in the same html file. But still doesn't work.

When I Render the solution in one HTML file I get the clear button displayed. But the Clear button won't react on clicks.