文本输入 KLTextArea

基本形式

大部分属性的用法与<textarea>一致。

<kl-textarea  placeholder="请输入备注" />

验证

通过指定rules规则对文本进行验证

<kl-textarea rules={rules} placeholder="请输入邮箱, 失去焦点时验证" />

var component = new NEKUI.Component({
    template: template,
    data: {
        rules: [
            {type: 'isFilled', on: 'blur', message: '请输入邮箱！'},
            {type: 'isEmail', on: 'keyup+blur', message: '请输入正确的邮箱！'}
        ]
    }
});

字数实时统计

<p>最大长度{maxLength}字，已经输入了{(value || '').length}字</p>
<kl-textarea rules={rules} value={value} placeholder="请输入内容" />

var component = new NEKUI.Component({
    template: template,
    data: {
        maxLength: 10,
        value: '',
        rules: [
            {method: function(text) {
                return (text || '').length <= component.data.maxLength;
            }, on: 'keyup+blur', message: '字数超出限制！'}
        ]
    }
});

表单项

在表单中使用

<kl-form>
    <kl-form-item title="备注">
        <kl-textarea placeholder="请输入备注" />
    </kl-form-item>
</kl-form>

限制输入长度

通过指定maxlength来限制输入内容长度

<kl-textarea  maxlength=100 placeholder="请输入备注" />

高宽设置

通过height和width设置输入框的高和宽

<kl-textarea height=100 width=400 placeholder="请输入备注"/>

API

KLTextArea

KLTextArea