Ole Henrik Oftedal
Posts: 0
Joined: Thu Apr 19, 2012 4:52 pm

Clear button inside input box

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
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Clear button inside input box

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
Posts: 0
Joined: Thu Apr 19, 2012 4:52 pm

Clear button inside input box

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

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

Ole Henrik Oftedal
Posts: 0
Joined: Thu Apr 19, 2012 4:52 pm

Clear button inside input box

Hi again!
(6 month later)

Will this be possible in the future in Tiggzi?

It seems to have changed in a later JQM build:

Image

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

Ole

Ole Henrik Oftedal
Posts: 0
Joined: Thu Apr 19, 2012 4:52 pm

Clear button inside input box

Hi again!

Is this possible in the new HTML5 App builder ?

I dont think this is possible in the old builder.

Ole

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Clear button inside input box

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
Posts: 0
Joined: Thu Apr 19, 2012 4:52 pm

Clear button inside input box

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
Posts: 0
Joined: Thu Apr 19, 2012 4:52 pm

Clear button inside input box

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
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

Clear button inside input box

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

Ole Henrik Oftedal
Posts: 0
Joined: Thu Apr 19, 2012 4:52 pm

Clear button inside input box

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.

Return to “Issues”