OpenHarmony JS UI小型系统自定义控件（4）—textarea多行输入原创精华

NL_AIDC_XJS

发布于 2022-4-7 16:19

浏览

1收藏

一、目标

使用OpenHarmony 小型系统支持的基础控件实现类似textarea的多行文本输入框，输入的文本可以控制动画的播放时间。

二、背景

在OpenHarmony标准的系统提供了基础组件：textarea多行文本输入的文本框。但在小型系统中并没有类似的组件，目前有个需求在小型系统中实现输入框功能，支持类似软键盘输入后显示相关的信息，并可以把输入的信息缓存，用于操作其他业务使用的数据。

三、环境

设备：君正x2000开发板
系统：OpenHarmony 3.0.0.0(LTS)

四、效果

4.1视频效果

请你移步至：小型系统textarea多行文本输入框视频效果

4.2效果截图

OpenHarmony JS UI小型系统自定义控件（4）—textarea多行输入-鸿蒙开发者社区

五、实现思路

从效果图中我们可以看出，textarea多行文本输入的文本框可以有以下几个特点：
1、输入框中可以通过自定义的软键盘输入单行或多行数据；
2、输入框有两种状态，常态、点击态

常态：未获取焦点，不显示软键盘，无法通过软键盘输入，输入框背景透明且边框为白色；
点击态：获取焦点，显示软键盘，支持软键盘输入，输入框背景灰色且边框为红色。

3、点击软键盘非完成按钮，在输入框中显示相关的文本；
4、点击软键盘完成按钮，清空输入框中内容，在结果框中显示用户输入的数据，输入框恢复为常态。
结合帧动画进行操作
1、在输入框中输入数字，点击完成，帧动画根据用户输入的数据设置动画播放的时长；
分析：小型系统所支持的基础容器中
1、使用text组件实现文本输入框，使用onclick监听点击事件，修改输入框的状态，通过动态的设置其属性：background-color、border-color来实现点击状态下的背景和边框颜色；
2、使用input type=‘button’实现软键盘中的按键，使用onclick监听点击事件，根据监听不同的按键执行不同的操作。
帧动画的实现
1、使用image-animator组件实现帧动画的加载，通其属性duration来设置单次动画播放的时长。

备注：如果你对上面提到的容器API还不熟悉，可以参看以下内容：

缺点：
1、无光标，无法在指定位置后插入数据，目前只能从最后一位插入数据，当然删除数据也只能从最后一位开始向前删除；
2、软键盘需要按需实现；
3、输入框内容超出限制高度则无法显示超出部分内容。

六、完整代码

说明：组件的代码包括三个部分：hml、css、js，因为代码比较简单，所以没有写注释，如果有不明白的地方可以留言。
动画需要的资源在文章底部附件中下载。

<!--textView.hml-->

<div class="container">
    <image src="/common/images/back.png" class="back-img" onclick="onBack"></image>
    <div class="animator_box">
        <image-animator class="animator" images="{{ images }}" duration="{{ animatorDuration }}" ref="animator">
        </image-animator>
    </div>
    <text class="animator-title" onclick="onText">
        动画单次播放时长{{ animatorDuration }}
    </text>
    <div class="title-content" style="background-color : {{ bg_color }}; border-color : {{ border_color }};">
        <text class="title" onclick="onText">
            {{ curText }}
        </text>
    </div>
    <text class="result">
        您输入的内容:{{ resultText }}
    </text>
    <div class="key-code" show="{{ isShowKeyCode }}">
        <div class="btn-content">
            <input class="num-btn" type="button" value="1" ref="num-one" onclick="onNumOne"></input>
            <input class="num-btn" type="button" value="2" ref="num-two" onclick="onNumTwo"></input>
            <input class="num-btn" type="button" value="3" ref="num-three" onclick="onNumThree"></input>
            <input class="num-btn" type="button" value="O" ref="en-char" onclick="onEnChar"></input>
            <input class="num-btn" type="button" onclick="onDelete">←</input>
        </div>
        <div class="btn-content">
            <input class="num-btn" type="button" value="#" ref="num-one" onclick="onSpecialSymbol1"></input>
            <input class="num-btn" type="button" value="@" ref="en-char" onclick="onSpecialSymbol2"></input>
            <input class="num-btn" type="button" value="鸿" ref="special-symbol" onclick="onZhChar1"></input>
            <input class="num-btn" type="button" value="蒙" ref="zh-char" onclick="onZhChar2"></input>
            <input class="num-btn" type="button" value="完成" onclick="onFinish"></input>
        </div>
    </div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

/*textView.css*/

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: black;
}
.title-content {
    width: 100%;
    height: 220px;
    border-width: 1px;
    padding: 10px;
    margin-bottom: 10px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}
.title {
    font-size: 30px;
    width: 95%;
    height: 220px;
}
.result {
    font-size: 22px;
    width: 100%;
    height: 220px;
    text-align: left;
    align-items: flex-start;
    border-width: 1px;
    border-color: white;
    padding: 10px;
}
.btn-content {
    flex-direction: row;
    width: 100%;
    height: 80px;
    margin-top: 5px;
    justify-content: space-between;
}
.num-btn{
    width: 19%;
    text-align: center;
    color: black;
    font-size: 25px;
    border-radius: 5px;
    background-color: white;
    margin: 0 2px;
}
.key-code{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 180px;
    align-items: center;
    margin-top: 10px;
}
.back-img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin: 20px;
}
.animator_box{
    width: 100%;
    height: 240px;
    justify-content: center;
}
.animator {
    width: 100%;
    height: 240px;
}
.animator-title {
    font-size: 30px;
    width: 95%;
    height: 40px;
    color: white;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.

// textView.js

import router from '@system.router';
const TEXT_COLOR = {
    NORMAL: '#000',
    CLICK: '#88666666'
};
const BORDER_COLOR = {
    NORMAL: '#fff',
    CLICK: '#c00000'
};
export default {
    data: {
        title: 'World',
        bg_color: TEXT_COLOR.NORMAL,
        isFocus: false,
        curText: '',
        resultText: '',
        isShowKeyCode: false,
        border_color: BORDER_COLOR.NORMAL,
        animatorDuration:'1s',
        images: [
            {
                src: "/common/images/1.png",
            },
            {
                src: "/common/images/2.png",
            },
            {
                src: "/common/images/3.png",
            },
            {
                src: "/common/images/4.png",
            },
            {
                src: "/common/images/5.png",
            },
            {
                src: "/common/images/6.png",
            },
            {
                src: "/common/images/7.png",
            },
            {
                src: "/common/images/8.png",
            },
            {
                src: "/common/images/9.png",
            },
            {
                src: "/common/images/10.png",
            },
            {
                src: "/common/images/11.png",
            },
            {
                src: "/common/images/12.png",
            },
            {
                src: "/common/images/13.png",
            },
            {
                src: "/common/images/14.png",
            },
            {
                src: "/common/images/15.png",
            },
            {
                src: "/common/images/16.png",
            },
            {
                src: "/common/images/17.png",
            },
            {
                src: "/common/images/18.png",
            },
            {
                src: "/common/images/19.png",
            },
            {
                src: "/common/images/20.png",
            },
            {
                src: "/common/images/21.png",
            },
            {
                src: "/common/images/22.png",
            },
            {
                src: "/common/images/23.png",
            },
            {
                src: "/common/images/24.png",
            },
            {
                src: "/common/images/25.png",
            },
            {
                src: "/common/images/26.png",
            },
            {
                src: "/common/images/27.png",
            }
        ],
    },
    onText() {
        this.bg_color = TEXT_COLOR.CLICK;
        this.border_color = BORDER_COLOR.CLICK;
        this.isFocus = true;
        this.isShowKeyCode = true;
        this.resultText = '';
    },
    onNumOne() {
        if (!this.isFocus) {
            return;
        }
        this.curText += '1';
    },
    onNumTwo() {
        if (!this.isFocus) {
            return;
        }
        this.curText += '2';
    },
    onNumThree() {
        if (!this.isFocus) {
            return;
        }
        this.curText += '3';
    },
    onEnChar() {
        if (!this.isFocus) {
            return;
        }
        this.curText += 'O';
    },
    onSpecialSymbol1() {
        if (!this.isFocus) {
            return;
        }
        this.curText += '#';
    },
    onSpecialSymbol2() {
        if (!this.isFocus) {
            return;
        }
        this.curText += '@';
    },
    onZhChar1() {
        if (!this.isFocus) {
            return;
        }
        this.curText += '鸿';
    },
    onZhChar2() {
        if (!this.isFocus) {
            return;
        }
        this.curText += '蒙';
    },
    onFinish() {
        this.resultText = this.curText;
        this.animatorDuration = this.curText+'s';
        this.reset();
    },
    /**
     * 每次点击删除最后一个字节
     */
    onDelete() {
        if (!this.isFocus) {
            return;
        }
        const len = this.curText.length;
        if (len >= 1) {
            this.curText = this.curText.substring(0, len - 1);
        }
    },
    reset() {
        this.isFocus = false;
        this.curText = '';
        this.bg_color = TEXT_COLOR.NORMAL;
        this.border_color = BORDER_COLOR.NORMAL;
        this.isShowKeyCode = false;
    },
    onBack() {
        router.replace({
            uri: 'pages/index/index'
        });
    },
    onDestroy() {
        this.reset();
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.