Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Clear Text Area

I want to create a button that when clicked will clear a text area of any text in it. I know this is probably really simple but I'm clearly not getting it at the moment…any help would be appreciated. TIA!

clear_text_b.addEventListener('click', function()
{

////something here that will clear the text in the textarea so I can retype it.    

});
comment.addclear_text_b;
— asked November 19th 2010 by Mark Smillie
  • clear
0 Comments

3 Answers

  • Accepted Answer

    HI mark

    var ta1 = Titanium.UI.createTextArea({
        value:'I am a textarea',
    });
    
    var b1=Ti.UI.createButton({
         title:'Clear'
    });
    b1.addEventListener('click',function(e){
          ta1.value = '';
    });
    
    — answered November 20th 2010 by Satta Ravi
    permalink
    0 Comments
  • Hi Mark

    If, in your code, "clear_text_b" is a button control and "comment" is a textArea control, then inside of the button's click event you would simply set the comment's text to equal an empty string, such as "" or ''. By looking at the docs for Titanium.UI.TextArea, I can see that the property used to configure the text that it displays (and that changes when the user types in new content) is "value".

    Hence the line you need is:

    comment.value = '';
    

    Hope this helps. Don't be afraid to ask more questions (although open a separate Q&A question for each of them); we were all there once, and it won't take you long to pick it up.

    Good luck

    — answered November 19th 2010 by Paul Dowsett
    permalink
    0 Comments
  • Unless you have a particular need for your own button to clear the field, I would suggest letting the system provide the clear button for you. You can specify any of these as a property of the text field when you create it:

    clearButtonMode: Ti.UI.INPUT_BUTTONMODE_ALWAYS;
    clearButtonMode: Ti.UI.INPUT_BUTTONMODE_ONFOCUS;
    clearButtonMode: Ti.UI.INPUT_BUTTONMODE_ONBLUR;
    clearButtonMode: Ti.UI.INPUT_BUTTONMODE_NEVER;
    

    If you don't mention the property at all,it defaults to NEVER and you don't see the system provided clear button. Use any of the other values to have the system provide a clear button for you (a small gray x in a circle) at the time requested by the constant.

    If for some reason you still want your own button, then in the event block where you had "////something here…" just put:

    (name of text field object).value = '';

    If you also want to force the keyboard closed, add:

    (name of text field object).blur();

    Oh wait, I guess you said text area, not text field. I don't think a text area supports a clearButtonMode property – or at least it isn't listed in the Titanium docs – but since I keyed this already I will leave it in my reply in case you (or other readers) are not aware of the clear button option for fields.

    — answered November 19th 2010 by Doug Handy
    permalink
    2 Comments
    • Doug, I am not sure this is a cross-platform solution - it's not available in android, is it?

      — commented November 19th 2010 by Paul Dowsett
    • Hal, I never realized that but just tried Kitchen Sink under Android and in fact you are right. It is ignored; bummer. :( I really wish the API docs mentioned what properties are platform specific.

      — commented November 20th 2010 by Doug Handy
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.