• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# input开发指导
2
3input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考[input API](../reference/arkui-js/js-components-basic-input.md)。
4
5
6## 创建input组件
7
8在pages/index目录下的hml文件中创建一个input组件。
9
10```html
11<!-- xxx.hml -->
12<div class="container">
13  <input type="text">
14     Please enter the content
15  </input>
16</div>
17```
18
19```css
20/* xxx.css */
21.container {
22  width: 100%;
23  height: 100%;
24  flex-direction: column;
25  justify-content: center;
26  align-items: center;
27  background-color: #F1F3F5;
28}
29```
30
31![zh-cn_image_0000001165344988](figures/zh-cn_image_0000001165344988.png)
32
33
34## 设置input类型
35
36通过设置type属性来定义input类型，如将input设置为button、date等。
37
38```html
39<!-- xxx.hml -->
40<div class="container">
41  <div class="div-button">
42    <dialog class="dialogClass" id="dialogId">
43      <div class="content">
44        <text>this is a dialog</text>
45      </div>
46    </dialog>
47    <input class="button" type="button" value="click" onclick="btnclick"></input>
48  </div>
49  <div class="content">
50    <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
51  </div>
52  <div class="content">
53    <input type="date" class="flex" placeholder="Enter data"></input>
54  </div>
55</div>
56```
57
58```css
59/* xxx.css */
60.container {
61  width: 100%;
62  height: 100%;
63  align-items: center;
64  flex-direction: column;
65  justify-content: center;
66  background-color: #F1F3F5 ;
67}
68.div-button {
69  flex-direction: column;
70  align-items: center;
71}
72.dialogClass{
73  width:80%;
74  height: 200px;
75}
76.button {
77  margin-top: 30px;
78  width: 50%;
79}
80.content{
81  width: 90%;
82  height: 150px;
83  align-items: center;
84  justify-content: center;
85}
86.flex {
87  width: 80%;
88  margin-bottom:40px;
89}
90```
91
92```js
93// xxx.js
94export default {
95  btnclick(){
96    this.$element('dialogId').show()
97  },
98}
99```
100
101
102![zh-cn_image_0000001163375178](figures/zh-cn_image_0000001163375178.gif)
103
104
105> **说明：**
106>
107> 仅当input类型为checkbox和radio时，当前组件是否选中的属性checked才生效，默认值为false。
108
109
110## 事件绑定
111
112向input组件添加search和translate事件。
113```html
114<!-- xxx.hml -->
115<div class="content">
116  <text style="margin-left: -7px;">
117    <span>Enter text and then touch and hold what you've entered</span>
118  </text>
119  <input class="input" type="text" onsearch="search" placeholder="search"> </input>
120  <input class="input" type="text" ontranslate="translate" placeholder="translate"> </input>
121</div>
122```
123
124```css
125/* xxx.css */
126.content {
127  width: 100%;
128  height: 100%;
129  flex-direction: column;
130  align-items: center;
131  justify-content: center;
132  background-color: #F1F3F5;
133}
134.input {
135  margin-top: 50px;
136  width: 60%;
137  placeholder-color: gray;
138}
139text{
140  width:100%;
141  font-size:25px;
142  text-align:center;
143}
144```
145
146```js
147// xxx.js
148import promptAction from '@ohos.promptAction'
149export default {
150  search(e){
151    promptAction.showToast({
152      message:  e.value,
153      duration: 3000,
154    });
155  },
156  translate(e){
157    promptAction.showToast({
158      message:  e.value,
159      duration: 3000,
160    });
161  }
162}
163```
164
165![zh-cn_image_0000001189088264](figures/zh-cn_image_0000001189088264.gif)
166
167
168## 设置输入提示
169
170通过对input组件添加showError方法来提示输入的错误原因。
171
172```html
173<!-- xxx.hml -->
174<div class="content">
175  <input id="input" class="input" type="text"  maxlength="20" placeholder="Please input text" onchange="change">
176  </input>
177  <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
178</div>
179```
180
181```css
182/* xxx.css */
183.content {
184  width: 100%;
185  height: 100%;
186  flex-direction: column;
187  align-items: center;
188  justify-content: center;
189  background-color: #F1F3F5;
190}
191.input {
192  width: 80%;
193  placeholder-color: gray;
194}
195.button {
196  width: 30%;
197  margin-top: 50px;
198}
199```
200
201```js
202// xxx.js
203import promptAction from '@ohos.promptAction'
204 export default {
205   data:{
206     value:'',
207   },
208   change(e){
209     this.value = e.value;
210     promptAction.showToast({
211     message: "value: " + this.value,
212       duration: 3000,
213      });
214   },
215   buttonClick(e){
216     if(this.value.length > 6){
217       this.$element("input").showError({
218         error:  'Up to 6 characters are allowed.'
219       });
220      }else if(this.value.length == 0){
221        this.$element("input").showError({
222          error:this.value + 'This field cannot be left empty.'
223        });
224      }else{
225        promptAction.showToast({
226          message: "success "
227        });
228      }
229   },
230 }
231```
232
233![zh-cn_image_0000001189248178](figures/zh-cn_image_0000001189248178.gif)
234
235> **说明：**
236> 该方法在input类型为text、email、date、time、number和password时生效。
237
238
239## 场景示例
240
241
242根据场景选择不同类型的input输入框，完成信息录入。
243
244
245```html
246<!-- xxx.hml -->
247<div class="container">
248  <div class="label-item">
249    <label>memorandum</label>
250  </div>
251  <div class="label-item">
252    <label class="lab" target="input1">content:</label>
253    <input class="flex" id="input1" placeholder="Enter content" />
254  </div>
255  <div class="label-item">
256    <label class="lab" target="input3">date:</label>
257    <input class="flex" id="input3" type="date" placeholder="Enter data" />
258  </div>
259  <div class="label-item">
260    <label class="lab" target="input4">time:</label>
261    <input class="flex" id="input4" type="time" placeholder="Enter time" />
262  </div>
263  <div class="label-item">
264    <label class="lab" target="checkbox1">Complete:</label>
265    <input class="flex" type="checkbox" id="checkbox1" style="width: 100px;height: 100px;" />
266  </div>
267  <div class="label-item">
268    <input class="flex" type="button" id="button" value="save" onclick="btnclick"/>
269  </div>
270</div>
271```
272
273
274```css
275/* xxx.css */
276.container {
277  flex-direction: column;
278  background-color: #F1F3F5;
279}
280.label-item {
281  align-items: center;
282  border-bottom-width: 1px;border-color: #dddddd;
283}
284.lab {
285  width: 400px;}
286label {
287  padding: 30px;
288  font-size: 30px;
289  width: 320px;
290  font-family: serif;
291  color: #9370d8;
292  font-weight: bold;
293}
294.flex {
295  flex: 1;
296}
297.textareaPadding {
298  padding-left: 100px;
299}
300```
301
302
303```js
304// xxx.js
305import promptAction from '@ohos.promptAction';
306export default {
307  data: {
308  },
309  onInit() {
310  },
311  btnclick(e) {
312    promptAction.showToast({
313      message:'Saved successfully!'
314    })
315  }
316}
317```
318
319
320![zh-cn_image_0000001188771358](figures/zh-cn_image_0000001188771358.gif)
321
322
323## 相关实例
324
325针对input开发，有以下相关实例可供参考：
326
327- [input、label（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/InputApplication)
328