Textarea Kind (replacement for RichText)

edited February 2012 in Enyo 1.0
If you are using a RichText kind (Enyo 1.0), then you will likely notice quickly that this will not work on iOS 4.x nor Android.

I have been working on a solution, and I finally have one! It was deceptively simple. I modified the enyo.Input (and enyo.BasicInput) to have a nodeTag of "textarea" instead of input.

Then, a few tweaks to make it grow in height as lines of text are entered or the input updated (due to the work of Greg Hrebek). Even some code to watch for min-height and height (so it all jives).

The end result is a new Textarea Kind. It works the exact same as Input, but well, allows for multiple lines of text.

Copy this into your project, then replace all RichText kinds with Textarea:


The code is too long to fit in this window, so check it out on Paste Bin. ** I updated this with the correction Syntactix made.


In order for this to work cross-platform (Android, iOS 5.0, etc), you must make a change to the enyo-build.js file. Around line 2692-ish of enyo-build.js, you must change the ontouchstart function to exclude TEXTAREA from the preventDefault.

touchstart: function(a) {
this._send("mousedown", a.changedTouches[0]), a.target && a.target.nodeName != "INPUT" && a.preventDefault();
touchstart: function(a) {
this._send("mousedown", a.changedTouches[0]), a.target && a.target.nodeName != "INPUT" && a.target.nodeName != "TEXTAREA" && a.preventDefault();


  • edited February 2012
    Just FYI the keyPress event does not register backspace, delete, or return key presses.
  • That is not the issue, first time I looked at it I just saw the keyPress events and overlooked the keyUp event in the BasicTextarea. Will take a look at this this morning.
  • Ok fixed it :) You first have to clear the height to reset the scrollHeight as it will not change once grown. I will update the file in dropbox and add this to Eirene in GitHub. Android fixing up next :)
    resize: function(){
    //--> First clear the height to reset the scrollHeight
    this.applyStyle("height", "0px");

    //--> Now apply the scrollHeight to the current box
    this.applyStyle("height", this.node.scrollHeight + "px");
  • Updated the control to respect the maxTextHeight parameter of the original control. Also posted this to the Eirene project on GitHub so others can partake in making it better.
  • Tested on ios5. Its not working well for me. I can't place/manipulate the cursor, and I can't select text. ANyone?
  • I'm working on that. RichText has the same issue on iOS 5, so we're no better or worse here. Same issue with this in Safari and Android.
  • What would be nice is if the hint text could autowrap, depending on the size of the textarea. This currently happens with RichText.
  • edited February 2012
    Okay, I think I've solved this RichText Problem (for ios5 at least).
    If you go to the enyo-build.js file, line 2692-ish, and remove the "a.preventDefault();", everything works fine. The RichText works fine (you can select text, copy/paste, etc)
    // compatibility/webkitGesture.js

    enyo.requiresWindow(function() {
    window.PalmSystem || (enyo.dispatcher.features.push(function(a) {
    enyo.iphoneGesture[a.type] && enyo.iphoneGesture[a.type](a);
    }), enyo.iphoneGesture = {
    _send: function(a, b) {
    var c = {
    type: a,
    preventDefault: enyo.nop
    enyo.mixin(c, b), enyo.dispatch(c);
    touchstart: function(a) {
    /* this._send("mousedown", a.changedTouches[0]), a.target && a.target.nodeName != "INPUT" && a.preventDefault(); */
    this._send("mousedown", a.changedTouches[0]), a.target && a.target.nodeName != "INPUT";
    I'm not entirely sure what the side effects of removing that may be, but so far i haven't seen any :)
  • edited February 2012
    Nice, but why not simply append it like this:

    && a.target.nodeName != "TEXTAREA"

    Yeah, that worked. You know, I had this added to mine, but did not realize it was in the source files and not the actual build file.

    So, replace the touchstart function with this:
    touchstart: function(a) {
    this._send("mousedown", a.changedTouches[0]), a.target && a.target.nodeName != "INPUT" && a.target.nodeName != "TEXTAREA" && a.preventDefault();
  • Sorry to bring up a relatively ancient topic again, but .. I've just now been wanting to get a multi-line input working for something .. and i noticed that the default RichText actually crashes the PlayBook 2.0 system. So, obviously, I'll be in need of a replacement :)

    Anyone able to speak as to if this control works on PlayBook? I also note in Syntactix's github repo, it doesn't say anything about modding Enyo for this, but it does say that it doesn't work at all on Android. Is that all current information?

  • Works just fine on Playbook and Android. Needs the Enyo framework mod as well.
  • Yeah sorry life has been keeping me busy from getting things updated. Will hopefully get some time this week to catch all this stuff up :)
  • I'm not sure if this is just something that RIM needs to deal with or not, but dragging the text cursor left of the left-most position on PlayBook results in an app crash. Doing it in the RichText results in a complete OS crash for me.
  • Hi thanks a lot for sharing this. Any plan to enhance this by supporting richContent as in RichText? And one problem I observed i.e. if i enter multiline , it will be saved as single line.
  • Am I the only one having trouble with this replacement on the BlackBerry PlayBook?

    Entering text for the first time works great, but when I try to load the before stored data, I will get br-tags instead of new lines. It will also show only the first two lines of text. It doesn't matter what I set as height or min-height style to that kind...

    Any help or alternative would be appreciated.

  • Ignore the part regarding the br-tags, that was my own code...

    But the main question is still unanswered by now:
    Why are only the first two lines shown, regardless of height and min-height?
  • edited June 2012
    I was able to fix it by myself, I just modified the setDomValue method of BasicTextarea to include a this.resize()-call:
    setDomValue: function(inValue) {
    this.setAttribute("value", inValue);
    // FIXME: it's not clear when we need to set .value vs. using setAttribute above
    if (this.hasNode()) {
    this.node.value = inValue;
    if (!this.isEmpty()) {
Sign In or Register to comment.