input

Input box
Scan QR code to try:

input

Property

TypeDefaultDescription
valueStringInitial contents.
nameStringComponent name, used for the form submission of obtained data.
typeStringtextInput type, effective value: text, number, digit.
passwordBooleanfalseIs password type or not.
placeholderStringPlaceholder .
placeholder-styleStringSpecify placeholder style.
placeholder-classStringSpecify placeholder style class.
disabledBooleanfalseDisable or not.
maxlengthNumber140Maximum length.
cursorNumberCursor location when specifying focus.
onInputEventHandleTrigger input event on keyboard entry, event.detail = {value: value}.
onConfirmEventHandleTrigger on clicking keyboard completion, event.detail = {value: value}.
onFocusEventHandleTrigger on getting focus, event.detail = {value: value}.
onBlurEventHandleTrigger on losing focus, event.detail = {value: value}.

Note (For iOS):

Due to iOS system restrictions, the input component has the following known issues:

  • The cursor of input might be misaligned with the input element.
  • The keyboard might be hidden with long press onthe input.

To solve these issues, add enableNative={{false}} to the input element of your MiniProgram code to downgrade to pure HTML5 elements.

Now the enableNative property is set to false. In this case,the number type is no longer supported, and only text type input is supported for inputs.

Screenshot

image.png

Sample Code

copy
<input maxlength="10" placeholder="maximum entered length 10" />
<input onInput="bindKeyInput" placeholder="entry synchronized to view"/>
<input type="number" placeholder="This is a numeral entry box" />
<input password type="text" placeholder="This is a password entry box" />
<input type="digit" placeholder="numeral keyboard with decimal"/>
copy
Page({
  data: {
    inputValue: '',
  },
  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value,
    });
  },
});