input

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

The <input> component provides an interactive interface to receive user input. It can be a radio button, check box, button, single-line text box, and more.

Required Permissions

None

Child Components

Not supported

Attributes

In addition to the universal attributes, the following attributes are supported.

Table 1 MenuOption⁵⁺

Styles

In addition to the universal styles, the following styles are supported.

Events

In addition to the universal events, the following events are supported.

• When type is set to text, email, date, time, number, or password, the following events are supported.

• When type is set to checkbox or radio, the following events are supported.

Methods

In addition to the universal methods, the following methods are supported.

Example

1. Single-line text box html <!-- xxx.hml --> <div class="content"> <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send" headericon="/common/search.svg" placeholder="Please input text" onchange="change" onenterkeyclick="enterkeyClick"> </input> <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input> </div>

   /* xxx.css */
   .content {
     width: 100%;
     flex-direction: column;
     align-items: center;
   }
   .input {
     width: 60%;
     placeholder-color: gray;
   }
   .button {
     width: 60%;
     background-color: gray;
     margin-top: 20px;
    }

   // xxx.js
   import promptAction from '@ohos.promptAction'
   export default {
     change(e){
       promptAction.showToast({
         message: "value: " + e.value,
         duration: 3000,
       });
     },
     enterkeyClick(e){
       promptAction.showToast({
         message: "enterkey clicked",
         duration: 3000,
       });
     },
     buttonClick(e){
       this.$element("input").showError({
         error: 'error text'
       });
     },
    }

1. Common button html <!-- xxx.hml --> <div class="div-button"> <input class="button" type="button" value="Input-Button"></input> </div>

   /* xxx.css */
   .div-button {
     flex-direction: column;
     align-items: center;
   }
   .button {
     margin-top: 30px;
     width: 280px;
   }

1. Check box html <!-- xxx.hml --> <div class="content"> <input onchange="checkboxOnChange" checked="true" type="checkbox"></input> </div>

   /* xxx.css */
   .content{
     width: 100%;
     height: 200px;
     align-items: center; 
     justify-content: center;   
   }

   // xxx.js
   import promptAction from '@ohos.promptAction'
   export default {
     checkboxOnChange(e) {
       promptAction.showToast({
         message:'checked: ' + e.checked,
         duration: 3000,
       });
     }
   }

1. Radio button html <!-- xxx.hml --> <div class="content"> <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input> <input type="radio" checked='false' name="radioSample" value="radio2" onchange="onRadioChange('radio2')"></input> <input type="radio" checked='false' name="radioSample" value="radio3" onchange="onRadioChange('radio3')"></input> </div>

   /* xxx.css */
   .content{
     width: 100%;
     height: 200px;
     justify-content: center;
     align-items: center;
   }

   // xxx.js
   import promptAction from '@ohos.promptAction'
   export default {
     onRadioChange(inputValue, e) {
       if (inputValue === e.value) {
         promptAction.showToast({
           message: 'The chosen radio is ' + e.value,
           duration: 3000,
         });
       }
     }
   }

你可能感兴趣的鸿蒙文章

harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm

harmony 鸿蒙Data Type Attributes

harmony 鸿蒙button

harmony 鸿蒙chart

harmony 鸿蒙divider

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙label

harmony 鸿蒙marquee

harmony 鸿蒙menu