Input单行文本输入组件

2024-06-19 10:07:40首发，17小时前更新

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

简单使用

表单文本域的编辑方式基本相同，针对type=text/email/search/password/tel/url文本域类型可以使用相同的input组件。

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

输出
HTML

```
                
                
            
```

默认值

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

输出
HTML

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

disabled和readonly

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

输出
HTML

```
                
                
            
```

取值

可以像原生标签那样获取组件的name、value、disabled、readOnly值。

注意，readOnly中的O是大写的。

输出
HTML
JS

```
                
                
            
```

                
                let vals = document.querySelector('#vals');
                getvals.onclick=function(){
                    this.innerHTML = `name:${vals.name},value:${vals.value},disabled:${vals.disabled},readOnly:${vals.readOnly}`
                }

placeholder替代文本

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

输出
HTML

```
                
                
            
```

placeholder替代文本

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

输出
HTML

```
                
                
            
```

图标占位

placeholder一般来说是纯文本，如果追加了属性iconholder之后，那么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

```
                
                
            
```

tools值中每一项可以使用action属性，该属性为一个函数，支持一个参数data，this指向本input组件。

由于技术标准的原因，在属性上写函数有很大的局限，短函数可直接写在action属性中，如果函数比较复杂请单独写。

输出
HTML
JS

```
                
                
            
```

                
                let el = document.querySelector('#act'),
                    test = el.querySelector('[rep="test"]');
                new ax.Tooltip(test,{content:'小提示'});
                test.onclick=()=>{
                    console.dir(el);
                }

使用标识

本组件的标识有三种，分别是icon、disk、cube和image，三种标识位于input的头部，说明如下:

icon：表示图标标识，通过属性icon进行设置，值为一个图标样式类，例如：icon="_icon global"
disk：表示图片标识，通过属性disk进行设置，值为一个图片地址，例如disk=".../demo.jpg"
cube：与disk相同用法，唯一的区别是disk是圆形图片，而cube的是方形图片。
image：也是图片，仅仅限制了高度。

注意，四个标识可以同时使用，不过建议四者只用一个。

输出
HTML

```
                
                
            
```

自定义内容

属性custom可以自由定义内容，支持html格式的文本。

输出
HTML

```
                
                
            
```

使用按钮

在某些简单的表单中可能只需要一个input和一个按钮，以便于快速提交。针对这种情况可对input组件使用btn属性，该属性可以是任意文本，应用btn属性后将在组件最后追加一个按钮。

输出
HTML

```
                
                
            
```

与按钮相关的属性还包括action和blocked。

action：是指点击按钮的函数，支持一个参数，该参数为一个对象，包含el和btn属性；函数中的this指向input组件。
blocked：是指禁用按钮事件，本质是将按钮设为disabled。

输出
HTML

```
                
                
            
```

使用标签

属性label可在组件前方添加一个文本标签，用于指明所录入内容的性质特点。

输出
HTML

```
                
                
            
```

使用单位

属性unit可在组件后方添加一个文本标签，用于指明所录入内容的单位。

输出
HTML

```
                
                
            
```

使用type

原生input支持很多种类型，本组件是定义文本型单行输入控件，所以对于除了type=checkbox、type=radio、type=file等非文本型的类型外都支持。

输出
HTML

```
                
                
            
```

使用意指

在某些原生输入控件中，其右侧会显示该控件的意义，例如type=datetime控件右侧会显示一个日期图标，右例如type=search控件右侧会显示清除图标。

本组件意指使用mean属性表示，该属性用来填写一个图标样式类，例如mean="_icon-search"。

输出
HTML

```
                
                
            
```

默认mean节点仅仅是图标展示，如果需要使用点击事件，可使用task属性来定义点击事件。

task函数意思是指通过该函数可获取input控件所需的值并进行设置。

该函数支持一个参数，参数为一个对象，属性包括btn（mean按钮）和el（input控件本身）。

输出
HTML

```
                
                
            
```

字符限制

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

输出
HTML

```
                
                
            
```

事件监听

因为组件内包含了一个非隐藏状态的文本域，所以组件拥有文本域的所有事件（input、change、paste等），建议使用addEventListener方法订阅事件。

实际上除了blur和focus事件不能使用on+event方法订阅之外，其他事件都可以使用on+event方法订阅。

输出
HTML
JS

```
                
                
            
```

                
                let el = document.querySelector('[name="demo2001"]');
                el.addEventListener('input',()=>{
                    console.log('input事件，当前值：',el.value)
                });
                el.addEventListener('change',()=>{
                    console.log('change事件，当前值：',el.value)
                });
                el.addEventListener('blur',()=>{
                    console.log('blur事件，当前值：',el.value)
                });
                el.addEventListener('focus',()=>{
                    console.log('focus事件，当前值：',el.value)
                });
                el.addEventListener('paste',()=>{
                    console.log('paste事件，当前值：',el.value)
                });
                el.addEventListener('cut',()=>{
                    console.log('cut事件，当前值：',el.value)
                });
                el.addEventListener('copy',()=>{
                    console.log('copy事件，当前值：',el.value)
                });

由于使用addEventListener方法传参比较麻烦，所以另外提供了一组监听事件。

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

输出
HTML
JS

```
                
                
            
```

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

操作方法

内置了reset()、clear()、set(data)、blur和focus方法，说明如下：

reset()：重置attrs属性，恢复到初始状态，所有的单选组件节点会重新生成
clear()：强制将当前的value设为空
set(data)：设置单个或多个attr属性，参数data支持两种数据格式：
- 一个对象，包含key和value属性，例如set({key:'name',value:'demo'})
- 一个对象数组，每一项均包含key和value属性，例如set([{key:'name',value:'demo'},{key:'value',value:'56'}])

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

输出
HTML
JS

```
                
                
            
```

                
                let demo = document.querySelector('#demo0001');
                demo.on('reset',()=>{
                    console.log('属性重置了！');
                });
                demo.on('cleared',()=>{
                    console.log('清除了文件域内容！');
                });
                demo.on('changed',(data)=>{
                    console.log('修改了值：',data);
                });
                demo.on('setted',(data)=>{
                    console.log('修改了属性：',data);
                });
                demo.on('input',(data)=>{
                    console.log('正在输入：',data);
                });
                demo.addEventListener('blur',()=>{console.log('失焦了')})
                demo.addEventListener('focus',()=>{console.log('聚焦了')})
                demo0001btn01.onclick =()=>{
                    demo.setAttribute('label','请选择指定文件类型...');
                    demo.setAttribute('size','lg');
                }
                demo0001btn02.onclick =()=>{
                    demo.set({key:'value',value:'中华上下五千年'});
                }
                demo0001btn03.onclick=()=>{
                    demo.reset();
                }
                demo0001btn04.onclick=()=>{
                    demo.clear();
                }
                demo0001btn05.onclick=()=>{
                    demo.blur();
                }
                demo0001btn06.onclick=()=>{
                    demo.focus();
                }

使用校验

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

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

输出
HTML

```
                
                
            
```

使用缓存

当改变了元素的属性或者value值的时候，如果需要缓存数据，以期再次加载页面的时候复原上一次的属性和value值，可使用stor-name属性，但是需要确保该属性值在浏览器缓存中是唯一的。

输出
HTML
JS

```
                
                
            
```

                
                let in001 = document.querySelector('[stor-name="in001"]');
                edit02.onclick =()=>{
                    in001.setAttribute('value','中华上下五千年');
                    in001.setAttribute('tools','');
                    console.log('当前数据：',ax.storage.get('in001'));
                }
                reset02.onclick=()=>{
                    in001.reset();
                    console.log('当前数据：',ax.storage.get('in001'));
                }
                clear02.onclick=()=>{
                    in001.clear();
                    console.log('当前数据：',ax.storage.get('in001'));
                }