3.2.0
Forum Demo Guide API Store

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!
Brian McCrary
September 19,
Nevermind, I figured it out: 

var textarea1 = new AW.UI.TextAreaInput;
textarea1.setAttribute("onselectstart",true);
Brian McCrary
September 19,
OK, how do I get the value attribute out of the textarea? I've tried 

textarea1.getAttribute("value")


and 

textarea1.value;
Brian McCrary
September 19,
textarea1.element().value ?
Alex (ActiveWidgets)
September 19,
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.
Brian McCrary
September 19,
Any word on this? Thanks!
Brian McCrary
September 20,
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 McCrary
September 20,
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
Carlos
September 20,
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
September 20,
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.
Brian McCrary
September 21,
Anyone? :)
Brian McCrary
September 22,
Alex,

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

This topic is archived.

See also:

textarea scrollbar and text select (v2.0.1) Mike (6)
Not able to select the complete text in the text filed with the mouse VaraPrasad (5)
Grid selection - cells, columns, rows selection (7)
grid.onCellValidated = function(text, column, row) ISSUE Andy (11)
Why does text disappear from a textarea after changing tab? Rick Henzel (5)
textarea and password type? Eric (10)
Select all rows - Performance problem Claudia (9)
v2.0 Combo Control - Value vs Text Rob Francis (8)
Text wrap problem in FireFox Ankur Motreja (9)
Firefox 26 issue - Input and Combo box text cut off Dan B. (9)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us