jsdk-offical/examples/jsfx/textarea/textarea.js

JSDK is the most comprehensive TypeScript framework, like JDK.

JS.imports('$jsfx').then(() => {
    ['hg', 'lg', 'md', 'sm', 'xs'].forEach((v, i) => {
        new TextArea({
            id: 'size' + i,
            appendTo: '#sizes',
            title: v,
            titlePlace: 'top',
            sizeMode: v
        });
    });
    new TextArea({
        id: 'resize1',
        title: 'Resize = both',
        titlePlace: 'top',
        resize: 'both'
    });
    new TextArea({
        id: 'txt4',
        title: 'Square:',
        titlePlace: 'top'
    });
    new TextArea({
        id: 'txt5',
        title: 'Round:',
        titlePlace: 'top',
        faceMode: RowsInputFaceMode.round
    });
    new TextArea({
        id: 'txt6',
        title: 'Shadow:',
        titlePlace: 'top',
        faceMode: [RowsInputFaceMode.shadow, RowsInputFaceMode.round]
    });
    new TextArea({
        id: 'txt7',
        title: 'Readonly:',
        titlePlace: 'top',
        iniValue: '123456',
        readonly: true
    });
    new TextArea({
        id: 'txt8',
        title: 'Disabled:',
        titlePlace: 'top',
        iniValue: '123456',
        disabled: true
    });
    new TextArea({
        id: 'txt9',
        title: 'Focus/Success:',
        titlePlace: 'top',
        colorMode: ColorMode.success
    });
    new TextArea({
        id: 'txt10',
        title: 'Outline/Success:',
        titlePlace: 'top',
        colorMode: ColorMode.success,
        outline: true
    });
    new TextArea({
        id: 'txt11',
        title: 'Allow empty && Length limits in [5,10]',
        titlePlace: 'top',
        maxlength: 10,
        validateMode: {
            mode: 'tip',
            place: 'top'
        },
        autoValidate: true,
        validators: [
            {
                name: 'length',
                short: 5,
                long: 10,
                tooShortMessage: 'Must >=5 chars!',
                tooLongMessage: 'Must <=10 chars!'
            }
        ]
    });
    new TextArea({
        id: 'txt12',
        title: 'Maxlength=20',
        titlePlace: 'top',
        maxlength: 20,
        iniValue: '012345678901234567890',
        counter: {
            tpl: 'Input {length} chars/Max chars is {maxLength}'
        }
    });
    Dom.applyStyle(`.jsfx-textarea.red {
            --title-color: red;
            --color: blue;
            --bdcolor: black;
            --focus-bdcolor: red;
        }`);
    new TextArea({
        id: 'cus1',
        title: 'RED:',
        cls: 'red'
    });
});