• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# input开发指导
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @kangshihui-->
5<!--Designer: @pssea-->
6<!--Tester: @jiaoaozihao-->
7<!--Adviser: @HelloCrease-->
8
9input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考[input API](../reference/apis-arkui/arkui-js/js-components-basic-input.md)。
10
11
12## 创建input组件
13
14在pages/index目录下的hml文件中创建一个input组件。
15
16```html
17<!-- xxx.hml -->
18<div class="container">
19  <input type="text">
20     Please enter the content
21  </input>
22</div>
23```
24
25```css
26/* xxx.css */
27.container {
28  width: 100%;
29  height: 100%;
30  flex-direction: column;
31  justify-content: center;
32  align-items: center;
33  background-color: #F1F3F5;
34}
35```
36
37![zh-cn_image_0000001165344988](figures/zh-cn_image_0000001165344988.png)
38
39
40## 设置input类型
41
42通过设置type属性来定义input类型，如将input设置为button、date等。
43
44```html
45<!-- xxx.hml -->
46<div class="container">
47  <div class="div-button">
48    <dialog class="dialogClass" id="dialogId">
49      <div class="content">
50        <text>this is a dialog</text>
51      </div>
52    </dialog>
53    <input class="button" type="button" value="click" onclick="btnclick"></input>
54  </div>
55  <div class="content">
56    <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
57  </div>
58  <div class="content">
59    <input type="date" class="flex" placeholder="Enter data"></input>
60  </div>
61</div>
62```
63
64```css
65/* xxx.css */
66.container {
67  width: 100%;
68  height: 100%;
69  align-items: center;
70  flex-direction: column;
71  justify-content: center;
72  background-color: #F1F3F5 ;
73}
74.div-button {
75  flex-direction: column;
76  align-items: center;
77}
78.dialogClass{
79  width:80%;
80  height: 200px;
81}
82.button {
83  margin-top: 30px;
84  width: 50%;
85}
86.content{
87  width: 90%;
88  height: 150px;
89  align-items: center;
90  justify-content: center;
91}
92.flex {
93  width: 80%;
94  margin-bottom:40px;
95}
96```
97
98```js
99// xxx.js
100export default {
101  btnclick(){
102    this.$element('dialogId').show()
103  },
104}
105```
106
107
108![zh-cn_image_0000001163375178](figures/zh-cn_image_0000001163375178.gif)
109
110
111> **说明：**
112>
113> 仅当input类型为checkbox和radio时，当前组件选中的属性是checked才生效，默认值为false。
114
115
116## 事件绑定
117
118向input组件添加translate事件。
119```html
120<!-- xxx.hml -->
121<div class="content">
122    <text style="margin-left: -7px;">
123        <span>Enter text and then touch and hold what you've entered</span>
124    </text>
125    <input class="input" type="text" ontranslate="translate" placeholder="translate"> </input>
126</div>
127```
128
129```css
130/* xxx.css */
131.content {
132  width: 100%;
133  height: 100%;
134  flex-direction: column;
135  align-items: center;
136  justify-content: center;
137  background-color: #F1F3F5;
138}
139.input {
140  margin-top: 50px;
141  width: 60%;
142  placeholder-color: gray;
143}
144text{
145  width:100%;
146  font-size:25px;
147  text-align:center;
148}
149```
150
151```js
152// xxx.js
153import promptAction from '@ohos.promptAction'
154
155export default {
156    translate(e) {
157        promptAction.showToast({
158            message: e.value,
159            duration: 3000,
160        });
161    }
162}
163```
164
165![JsInputTranslate](figures/JsInputTranslateEx.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>
237> 该方法在input类型为text、email、date、time、number和password时生效。
238
239
240## 场景示例
241
242
243根据场景选择不同类型的input输入框，完成信息录入。
244
245
246```html
247<!-- xxx.hml -->
248<div class="container">
249  <div class="label-item">
250    <label>memorandum</label>
251  </div>
252  <div class="label-item">
253    <label class="lab" target="input1">content:</label>
254    <input class="flex" id="input1" placeholder="Enter content" />
255  </div>
256  <div class="label-item">
257    <label class="lab" target="input3">date:</label>
258    <input class="flex" id="input3" type="date" placeholder="Enter data" />
259  </div>
260  <div class="label-item">
261    <label class="lab" target="input4">time:</label>
262    <input class="flex" id="input4" type="time" placeholder="Enter time" />
263  </div>
264  <div class="label-item">
265    <label class="lab" target="checkbox1">Complete:</label>
266    <input class="flex" type="checkbox" id="checkbox1" style="width: 100px;height: 100px;" />
267  </div>
268  <div class="label-item">
269    <input class="flex" type="button" id="button" value="save" onclick="btnclick"/>
270  </div>
271</div>
272```
273
274
275```css
276/* xxx.css */
277.container {
278  flex-direction: column;
279  background-color: #F1F3F5;
280}
281.label-item {
282  align-items: center;
283  border-bottom-width: 1px;border-color: #dddddd;
284}
285.lab {
286  width: 400px;}
287label {
288  padding: 30px;
289  font-size: 30px;
290  width: 320px;
291  font-family: serif;
292  color: #9370d8;
293  font-weight: bold;
294}
295.flex {
296  flex: 1;
297}
298.textareaPadding {
299  padding-left: 100px;
300}
301```
302
303
304```js
305// xxx.js
306import promptAction from '@ohos.promptAction';
307export default {
308  data: {
309  },
310  onInit() {
311  },
312  btnclick(e) {
313    promptAction.showToast({
314      message:'Saved successfully!'
315    })
316  }
317}
318```
319
320
321![zh-cn_image_0000001188771358](figures/zh-cn_image_0000001188771358.gif)
322