Textarea Kind (replacement for RichText)
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
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:
http://pastebin.com/kV7LMRs6
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.
IMPORTANT NOTICE:
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.
Change:
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
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:
http://pastebin.com/kV7LMRs6
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.
IMPORTANT NOTICE:
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.
Change:
touchstart: function(a) {
this._send("mousedown", a.changedTouches[0]), a.target && a.target.nodeName != "INPUT" && a.preventDefault();
},
To:
touchstart: function(a) {
this._send("mousedown", a.changedTouches[0]), a.target && a.target.nodeName != "INPUT" && a.target.nodeName != "TEXTAREA" && a.preventDefault();
},
Comments
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"); },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&& 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(); },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?
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.
Cheers,
Sven
But the main question is still unanswered by now:
Why are only the first two lines shown, regardless of height and min-height?
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; this.resize(); } if (!this.isEmpty()) { this.addRemovePlaceholderClassName(false); } },