Textarea多行文本输入

2024-06-19 10:08:55首发，2个月前更新

AX-TEXTAREA自定义标签是对原生textarea标签的封装，除了保持输入多行文本功能之外，另外增加了工具箱、字符限制提示和输入校验的支持。

简单使用

ax-textarea表示本框架自定义的文本域组件，对原生文本域包裹了一层，统一了外观形式，并支持右侧工具条。

输出
HTML

```
                
                
            
```

默认值

使用value属性可进行初始化设置，或者将初始值直接写入标签内也可。

输出
HTML

中华上下五千年
```
                
                
            
```

disabled和readonly

这两个布尔属性也是支持的，效果跟原生文件域一致。

输出
HTML

```
                
                
            
```

placeholder替代文本

文件域组件的替代文本使用placeholder属性来定义，默认值为：请输入...。

输出
HTML

```
                
                
            
```

size尺寸

通过size属性可设置文件域组件的尺寸，支持sm、md（默认）和lg三种尺寸。

输出
HTML

```
                
                
            
```

使用工具

通过tools属性设置文本域的工具箱，直接追加tools属性或者设置tools=true，将默认启用清除按钮。

该工具箱是由createTools函数创建，该函数详细使用方法请点击这里。

自定义工具箱的写法举例：

简写，例如：tools='["update","remove","close"]'
完整写法，例如：tools='[{name:"test",icon:"_icon-global"},...]'
混合写法，例如：tools='[{name:"test",icon:"_icon-global"},"remove","close",...]'

输出
HTML

```
                
                
            
```

字符限制

通过limit属性显示输入文本数量，启用该属性将会在下方自动创建字符限制提示容器。

输出
HTML

```
                
                
            
```

事件监听

textarea组件支持的主要监听事件：

change：当值改变的时候触发，支持一个参数，该参数为一对象，对象属性包含name、newVal和oldVal
input：当原生表单域在手动输入值的时候触发，支持一个参数即当前input的值
clear：清除表单域值的时候触发，无参数

输出
HTML
JS

```
                
                
            
```

                
                let onins = document.querySelector('[name="on"]');
                onchangebtn.onclick =()=>{
                    onins.setAttribute('value','中华上下五千年');
                }
                onclear.onclick=()=>{
                    onins.clear();
                }
                onins.on('change',(data)=>{
                    console.log('值改变了',data)
                }).on('input',(data)=>{
                    console.log('因输入，值改变了',data)
                }).on('clear',(data)=>{
                    console.log('值清空了')
                });

操作方法

内置了reset()和clear()方法，说明如下：

reset()：重置attrs属性，恢复到初始状态，自然也会将值清空
clear()：清空值，仅仅是将input的值清空，不改变attrs属性

基于这两个方法，组件提供了相应的监听事件。

输出
HTML
JS

```
                
                
            
```

                
                let demo = document.querySelector('#demo');
                demo.on('reset',()=>{
                    console.log('属性重置了！');
                });
                demo.on('clear',()=>{
                    console.log('清除了文件域内容！');
                });
                demo.on('change',(data)=>{
                    console.log('修改了属性：',data);
                });
                demo.on('input',(data)=>{
                    console.log('正在输入：',data);
                });
                edit.onclick =()=>{
                    demo.setAttribute('label','请选择指定文件类型...');
                    demo.setAttribute('size','lg');
                }
                reset.onclick=()=>{
                    demo.reset();
                }
                clear.onclick=()=>{
                    demo.clear();
                }

使用校验

表单域校验是独立的操作方法，如果需要必填校验，直接追加ax-valid属性即可（如需实时触发方请使用input），详细用法请点击这里。

如果测试校验，请务必使用name属性，确保表单域在form中的唯一性。

输出
HTML

```
                
                
            
```