ActiveWidgets • Textarea text select

Hello,

Has anyone figured out how to make the textarea that Jim Hunter proposed using (see code below) selectable?

AW.UI.TextAreaInput = AW.System.Control.subclass();

AW.UI.TextAreaInput.create = function() {

    var obj = this.prototype;

    obj.setTag("textarea");

    obj.setClass("text", "expand");

             obj.setClass("item", "control");

    obj.setClass("ui", "imagetext");

    obj.setClass("templates", "");

    obj.setClass("input", "box");

}

Thanks!

Nevermind, I figured it out:

var textarea1 = new AW.UI.TextAreaInput;

textarea1.setAttribute("onselectstart",true);

OK, how do I get the value attribute out of the textarea? I've tried

textarea1.getAttribute("value")

and

textarea1.value;

textarea1.element().value ?

Thanks, Alex. I tried that, though, and can't get it to work. Here's what I'm doing to capture the value attribute:

textarea1.setEvent("onKeyUp",function() {

    textarea.setContent("value",textarea1.element().value);

});

This gives me an "undefined is null or not an object" error when the onKeyUp event is fired.

Any word on this? Thanks!

OK, here's my complete code (with labels and values changed to protect the innocent). I'm noticing that both the textareas and the inputs (of type "file") don't retain their values when you switch tabs. Does anyone have any ideas on how to stop that from happening?

<html>

<head>

<title>ActiveWidgets Examples</title>

<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>

<script src="../../runtime/lib/aw.js"></script>

<style>

    .aw-system-control {position: absolute}



    #box     {left:   0px; top:   0px; width: 700px; height: 453px; border: 1px solid #999; background: #ffffff; position: absolute;}

    #tabs     {left:   6px; top:   6px; width: 700px; height:  22px;}

    #frame     {left:   6px; top:  28px; width: 400px; height: 425px; border: 1px solid #999; background: #f9f8f4; position: absolute;}



    #label1         {left:  20px; top:  60px; width: 300px; height:  16px;}

    #label2         {left:  90px; top:  81px; width:  30px; height:  16px;}

    #input1         {left:  90px; top:  60px; width: 200px; height:  20px;}

    #label3         {left:  20px; top: 110px; width:  50px; height:  16px;}

    #combo1         {left:  90px; top: 110px; width: 100px; height:  20px;}

    #combo1-popup                            {width: 100px; height:  53px;}

    #label4         {left:  20px; top: 150px; width: 310px; height:  20px;}

    #combo2         {left:  90px; top: 150px; width: 100px; height:  20px;}

    #combo2-popup                            {width: 100px; height:  53px;}

    #label5         {left:  20px; top: 190px; width:  30px; height:  16px;}

    #combo3         {left:  90px; top: 190px; width: 100px; height:  20px;}

    #combo3-popup                             {width: 100px; height:  36px;}

    

    #label6         {left:  20px; top:  90px; width:  65px; height:  32px;}

    #textarea1     {left:  90px; top:  60px; width: 300px; height: 100px; overflow: auto;}

    #label6a     {left:  90px; top: 155px; width:  65px; height:  32px;}

    #label7         {left:  20px; top: 210px; width:  65px; height:  48px;}

    #textarea2     {left:  90px; top: 185px; width: 300px; height: 100px; overflow: auto;}

    #label7a     {left:  90px; top: 280px; width:  65px; height:  32px;}

    #label8         {left:  20px; top: 335px; width:  65px; height:  48px;}

    #textarea3     {left:  90px; top: 310px; width: 300px; height: 100px; overflow: auto;}

    #label8a     {left:  90px; top: 405px; width:  65px; height:  32px;}



    #label9         {left:  20px; top:  60px; width:  30px; height:  16px;}

    #combo4         {left: 125px; top:  60px; width: 125px; height:  20px;}

    #combo4-popup                             {width: 125px; height: 116px;}

    #label10     {left:  20px; top: 110px; width:  30px; height:  16px;}

    #combo5         {left: 125px; top: 110px; width: 125px; height:  20px;}

    #combo5-popup                             {width: 125px; height:  20px;}

    #label11     {left:  20px; top: 150px; width:  30px; height:  16px;}

    #combo6         {left: 125px; top: 150px; width: 125px; height:  20px;}

    #combo6-popup                             {width: 125px; height:  20px;}

    #label12     {left:  20px; top: 190px; width:  30px; height:  16px;}

    #combo7         {left: 125px; top: 190px; width: 125px; height:  20px;}

    #combo7-popup                             {width: 125px; height:  20px;}

    #label13     {left:  20px; top: 230px; width:  30px; height:  16px;}

    #combo8         {left: 125px; top: 230px; width: 125px; height:  20px;}

    #combo8-popup                             {width: 125px; height:  20px;}

    #label14     {left:  20px; top: 270px; width:  30px; height:  16px;}

    #combo9         {left: 125px; top: 270px; width: 125px; height:  20px;}

    #combo9-popup                             {width: 125px; height:  20px;}

    

    #label15     {left:  20px; top:  60px; width: 300px; height:  16px;}

    #input2         {left: 100px; top:  60px; width: 200px; height:  20px;}

    #label16     {left:  20px; top: 100px; width: 300px; height:  16px;}

    #input3         {left: 100px; top: 100px; width: 200px; height:  20px;}

    #label17     {left:  20px; top: 140px; width: 300px; height:  16px;}

    #input4         {left: 100px; top: 140px; width: 200px; height:  20px;}

    #label18     {left:  20px; top: 180px; width: 300px; height:  16px;}

    #input5         {left: 100px; top: 180px; width: 200px; height:  20px;}

    #label19     {left:  20px; top: 250px; width:  75px; height:  32px;}

    #textarea4     {left: 100px; top: 220px; width: 300px; height: 100px; overflow: auto;}

    #label19a     {left: 100px; top: 315px; width:  65px; height:  32px;}

    

</style>

</head>

<body>

<script>

    // Textarea definition from Jim Hunter on the Active Widgets Support Forum

    AW.UI.TextAreaInput = AW.System.Control.subclass();

    AW.UI.TextAreaInput.create = function() {

        var obj = this.prototype;

          obj.setTag("textarea");

        obj.setClass("text", "expand");

        obj.setClass("item", "control");

        obj.setClass("ui", "imagetext");

        obj.setClass("templates", "");

        obj.setClass("input", "box");

    }

    

    var box = new AW.HTML.DIV;

    box.setId("box");

    document.write(box);



    var tabs = new AW.UI.Tabs;

    tabs.setId("tabs");

    tabs.setItemText(["a", "b", "c", "d"]);

    tabs.setItemCount(4);

    tabs.setSelectedItems([0]);

    document.write(tabs);



    var frame = new AW.HTML.DIV;

    frame.setId("frame");

    document.write(frame);



    var container = new AW.HTML.SPAN;

    document.write(container);



//--

    var maxCharsTitle = 200;

    var maxCharsDescriptionFields = 4000;



    var label1 = new AW.UI.Label;

    label1.setId("label1");

    label1.setControlText("1:");



    var input1 = new AW.UI.Input;

    input1.setId("input1");

    input1.setControlText("");

    input1.getContent("box/text").setAttribute("maxlength", maxCharsTitle); 

    input1.onControlTextChanged = function(text) { 

        if(text.length < maxCharsTitle) {

            label2.setControlText("(" + eval(maxCharsTitle-text.length) + " characters left)");

        }

        else {

            label2.setControlText("0 characters left");

        }

    }



    var label2 = new AW.UI.Label;

    label2.setId("label2");

    label2.setControlText("(" + maxCharsTitle + " characters left)");



    var label3 = new AW.UI.Label;

    label3.setId("label3");

    label3.setControlText("2:");



    var combo1 = new AW.UI.Combo;

    combo1.setId("combo1");

    combo1.setControlText("");

    combo1.setItemText(["a", "b", "c"]);

    combo1.setItemCount(3);

    combo1.getContent("box/text").setAttribute("readonly",true);

    

    var label4 = new AW.UI.Label;

    label4.setId("label4");

    label4.setControlText("3:");

    

    var combo2 = new AW.UI.Combo;

    combo2.setId("combo2");

    combo2.setControlText("");

    combo2.setItemText(["a", "b", "c"]);

    combo2.setItemCount(3);

    combo2.getContent("box/text").setAttribute("readonly",true);



    var label5 = new AW.UI.Label;

    label5.setId("label5");

    label5.setControlText("4:");

    

    var combo3 = new AW.UI.Combo;

    combo3.setId("combo3");

    combo3.setItemText(["a", "b"]);

    combo3.setItemCount(2);

    combo3.setControlText(combo3.getItemText(0));

    combo3.setSelectedItems(0);

    combo3.getContent("box/text").setAttribute("readonly",true);



//    ---



    var label6 = new AW.UI.Label;

    label6.setId("label6");

    label6.setControlText("1:");

    label6.setClass("text", "wrap");



    var textarea1 = new AW.UI.TextAreaInput;

    textarea1.setId("textarea1");

    textarea1.setAttribute("onselectstart",true);

    textarea1.setEvent("onKeyUp",function() {

        textarea.setContent("value",textarea1.element().value);

        /*if(text.length < maxCharsDescriptionField) {

            label6a.setControlText("(" + eval(maxCharsDescriptionField-text.length) + " characters left)");

        }

        else {

            label6a.setControlText("0 characters left");

        }*/

    });

    

    var label6a = new AW.UI.Label;

    label6a.setId("label6a");

    label6a.setControlText("(" + maxCharsDescriptionFields + " characters left)");

    

    var label7 = new AW.UI.Label;

    label7.setId("label7");

    label7.setControlText("2:");

    label7.setClass("text", "wrap");



    var textarea2 = new AW.UI.TextAreaInput;

    textarea2.setId("textarea2");

    textarea2.setAttribute("onselectstart",true);



    var label7a = new AW.UI.Label;

    label7a.setId("label7a");

    label7a.setControlText("(" + maxCharsDescriptionFields + " characters left)");

    

    var label8 = new AW.UI.Label;

    label8.setId("label8");

    label8.setControlText("3:");

    label8.setClass("text", "wrap");



    var textarea3 = new AW.UI.TextAreaInput;

    textarea3.setId("textarea3");

    textarea3.setAttribute("onselectstart",true);

    

    var label8a = new AW.UI.Label;

    label8a.setId("label8a");

    label8a.setControlText("(" + maxCharsDescriptionFields + " characters left)");



//  ---



    var label9 = new AW.UI.Label;

    label9.setId("label9");

    label9.setControlText("1:");

    

    var combo4 = new AW.UI.Combo;

    combo4.setId("combo4");

    combo4.setControlText("");

    combo4.setItemText(["a", "b", "c", "d", "e", "f", "g"]);

    combo4.setItemCount(7);

    combo4.getContent("box/text").setAttribute("readonly",true);

    

    var label10 = new AW.UI.Label;

    label10.setId("label10");

    label10.setControlText("2:");

    

    var combo5 = new AW.UI.Combo;

    combo5.setId("combo5");

    combo5.setControlText("");

    combo5.setItemText(["a"]);

    combo5.setItemCount(1);

    combo5.getContent("box/text").setAttribute("readonly",true);

    

    var label11 = new AW.UI.Label;

    label11.setId("label11");

    label11.setControlText("3:");

    

    var combo6 = new AW.UI.Combo;

    combo6.setId("combo6");

    combo6.setControlText("");

    combo6.setItemText(["a"]);

    combo6.setItemCount(1);

    combo6.getContent("box/text").setAttribute("readonly",true);

    

    var label12 = new AW.UI.Label;

    label12.setId("label12");

    label12.setControlText("4:");

    

    var combo7 = new AW.UI.Combo;

    combo7.setId("combo7");

    combo7.setControlText("");

    combo7.setItemText(["a"]);

    combo7.setItemCount(1);

    combo7.getContent("box/text").setAttribute("readonly",true);

    

    var label13 = new AW.UI.Label;

    label13.setId("label13");

    label13.setControlText("5:");

    

    var combo8 = new AW.UI.Combo;

    combo8.setId("combo8");

    combo8.setControlText("");

    combo8.setItemText(["a"]);

    combo8.setItemCount(1);

    combo8.getContent("box/text").setAttribute("readonly",true);

    

    var label14 = new AW.UI.Label;

    label14.setId("label14");

    label14.setControlText("6:");

    

    var combo9 = new AW.UI.Combo;

    combo9.setId("combo9");

    combo9.setControlText("");

    combo9.setItemText(["a"]);

    combo9.setItemCount(1);

    combo9.getContent("box/text").setAttribute("readonly",true);

    

//  ---



    var label15 = new AW.UI.Label;

    label15.setId("label15");

    label15.setControlText("1:");



    var input2 = new AW.UI.Input;

    input2.setId("input2");

    input2.getContent("box/text").setAttribute("type", "file");

    

    var label16 = new AW.UI.Label;

    label16.setId("label16");

    label16.setControlText("2:");



    var input3 = new AW.UI.Input;

    input3.setId("input3");

    input3.getContent("box/text").setAttribute("type", "file");

    

    var label17 = new AW.UI.Label;

    label17.setId("label17");

    label17.setControlText("3:");



    var input4 = new AW.UI.Input;

    input4.setId("input4");

    input4.getContent("box/text").setAttribute("type", "file");

    

    var label18 = new AW.UI.Label;

    label18.setId("label18");

    label18.setControlText("4:");



    var input5 = new AW.UI.Input;

    input5.setId("input5");

    input5.getContent("box/text").setAttribute("type", "file");



    var label19 = new AW.UI.Label;

    label19.setId("label19");

    label19.setControlText("5:");

    label19.setClass("text", "wrap");



    var textarea4 = new AW.UI.TextAreaInput;

    textarea4.setId("textarea4");

    textarea4.setAttribute("onselectstart",true);



    var label19a = new AW.UI.Label;

    label19a.setId("label19a");

    label19a.setControlText("(" + maxCharsDescriptionFields + " characters left)");

    

//  ---



    var page1 = [label1, input1, label2, label3, combo1, label4, combo2, label5, combo3];

    var page2 = [label6, textarea1, label6a, label7, textarea2, label7a, label8, textarea3, label8a];

    var page3 = [label9, combo4, label10, combo5, label11, combo6, label12, combo7, label13, combo8, label14, combo9];

    var page4 = [label15, input2, label16, input3, label17, input4, label18, input5, label19, textarea4, label19a];

    var pages = [page1, page2, page3, page4];



    container.element().innerHTML = page1.join("");



    tabs.onCurrentItemChanged = function(i) {



        container.element().innerHTML = pages[i].join("");



        if (container.$browser=="opera"){document.body.className += ""}

        

        /*alert(input5);

        var temp = input5.toString().split("value=");

        var temp2 = temp[1].split(">");

        input5.getContent("box/text").setAttribute("value",temp2[0]);

        alert(input5);*/

    }





</script>

</body>

</html>

Brian, I think you just have two minnor spelling-mstks
onkeyup instead of onKeyUp and a missing '1' after textarea word.

I test it like this and seems to work fine for me:

textarea1.setEvent("onkeyup",function() { 

 textarea1.setContent('value',  textarea1.element().value );

});

HTH

And for the inputs type 'file', not absolutelly sure but here is a possible solution.

var input2 = new AW.UI.Input; 

    input2.setId("input2"); 

    input2.getContent("box/text").setAttribute("type", "file"); 



        input2.onControlTextChanged = function(text) {

        this.setContent("box/text", text);

         }



    input2.onControlClicked = function(text) {

        this.getContent("box/text").setAttribute("type", "file");

     }

Carlos,

Thanks! The textareas work well now. I didn't realize that "onkeyup" was case-sensitive.

As for the input type of file, the code you posted doesn't work for me. I keep getting the "Object doesn't support this property or method" error.

Anyone? :)

Alex,

Any word on this? If not, I am going to have to abandon using ActiveWidgets for the current project I'm working on.

Textarea text select

Forum search