input

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 Component

Not supported

Attributes

In addition to the attributes in Universal Attributes, the following attributes are supported.

Table 1 MenuOption⁵⁺

Styles

In addition to the styles in Universal Styles, the following styles are supported.

Events

In addition to the events in Universal Events, the following events are supported.

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

  Name	Parameter	Triggered when
  change	{ value:inputValue }	Triggered when the content entered in the text box changes. The most recent text entered by the user is returned. NOTE: If you change the value attribute directly, this event will not be triggered.
  enterkeyclick	{ value:enterKey }	Triggered when the Enter key on a soft keyboard is pressed. The type of the Enter key is returned, which is of the number type. Available values are as follows: 2: returned if enterkeytype is go. 3: returned if enterkeytype is search. 4: returned if enterkeytype is send. 5: returned if enterkeytype is next. 6: returned if enterkeytype is default, done, or is not set.
  translate5+	{ value: selectedText }	Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned.
  share5+	{ value: selectedText }	Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned.
  search5+	{ value: selectedText }	Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned.
  optionselect5+	{ index:optionIndex, value: selectedText }	Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the menuoptions attribute is set. The option index and selected text content are returned.
  selectchange6+	{ start: number, end: number }	Triggered when the text selection changes.

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

  Name	Parameter	Triggered when
  change	{ checked:true | false }	Triggered when the checked status of the checkbox or radio button changes.

Methods

In addition to the methods in Universal Methods, the following events are supported.

Example Code

1. Single-line text box

   <!-- 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"></input>
   </div>
   

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

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

   

2. Common button

   <!-- 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;
   }
   

   

3. Check box

   <!-- 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 prompt from '@system.prompt'
   export default {
     checkboxOnChange(e) {
       prompt.showToast({
         message:'checked: ' + e.checked,
         duration: 3000,
       });
     }
   }
   

   

4. Radio button

   <!-- 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 prompt from '@system.prompt'
   export default {
     onRadioChange(inputValue, e) {
       if (inputValue === e.value) {
         prompt.showToast({
           message: 'The chosen radio is ' + e.value,
           duration: 3000,
         });
       }
     }
   }