Clear button inside input box

[Ole Henrik Oftedal]

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

[Maryna Brodina]

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...

[Ole Henrik Oftedal]

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

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

[Ole Henrik Oftedal]

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

[Ole Henrik Oftedal]

Hi again!

Is this possible in the new HTML5 App builder ?

I dont think this is possible in the old builder.

Ole

[Maryna Brodina]

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

[Ole Henrik Oftedal]

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

[Ole Henrik Oftedal]

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

[Illya Stepanov]

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

[Ole Henrik Oftedal]

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.