input

交互式组件，包括单选框，多选框，按钮和单行文本输入框。

权限列表

无

子组件

不支持。

属性

除支持通用属性外，还支持如下属性：

表 1 MenuOption⁵⁺

样式

除支持通用样式外，还支持如下样式：

事件

除支持通用事件外，还支持如下事件：

• 当input类型为text、email、date、time、number、password时，支持如下事件：

  名称	参数	描述
  change	{ value:inputValue }	输入框输入内容发生变化时触发该事件，返回用户当前输入值。 说明： 改变value属性值不会触发该回调。
  enterkeyclick	{ value:enterKey }	软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为： 2：设置enterkeytype属性为go时生效。 3：设置enterkeytype属性为search时生效。 4：设置enterkeytype属性为send时生效。 5：设置enterkeytype属性为next时生效。 6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。
  translate5+	{ value: selectedText }	设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。
  share5+	{ value: selectedText }	设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。
  search5+	{ value: selectedText }	设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。
  optionselect5+	{ index:optionIndex, value: selectedText }	文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。
  selectchange6+	{ start: number，end: number }	文本选择变化时触发事件。

• 当input类型为checkbox、radio时，支持如下事件：

  名称	参数	描述
  change	{ checked:true | false }	checkbox多选框或radio单选框的checked状态发生变化时触发该事件。

方法

除支持通用方法外，还支持如下方法：

示例

1. type为text

   <!-- 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. type为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. type为checkbox

   <!-- 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. type为radio

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