Long Password

You can use the long-password component to display the input box for the password.

Note:

The long-password is a controlled component. The component value needs to be obtained by the onInput event.

Sample code

See the sample codes in different languages:

.json

copy
{
  "defaultTitle": "verify-code",
  "usingComponents":{
    "long-password": "mini-ali-ui/es/long-password/index"
  }
}

.axml

copy
<view>
  <view style="margin-top: 10px;" />
  <view style="padding: 0 10px;">Long password box</view>
  <view style="margin-top: 10px;" />
  <long-password
    placeholder="" 
    value="{{longPassword}}" 
    clear="{{true}}" 
    onInput="onInput" 
    onClear="onClear" />
</view>

.js

copy
Page({
  data: {
    longPassword: '',
  },
  onInput(e) {
    this.setData({
      longPassword: e.detail.value,
    });
  },
  onClear() {
    this.setData({
      longPassword: '',
    });
  },
});

Parameters

Property

Type

Description

className

String

Customized class. 

inputCls

String

Customized class for the input box that uses the input component.

lastBoolean

An indicator of whether the input box is the last one. The default value is false.

valueStringInitial content.
nameString

Component name, which is used to obtain data by submitting the form.

placeholderString

Placehoder.

placeholderStyleString

Style of the placeholder.

placeholderClassString

Style class of the placeholder.

disabledBoolean

An indicator of whether to disable the function of clearing the password. The default value is false.

maxlengthNumber

Maximum length of the password. The default value is 140.

focusBoolean

An indicator of whether to get focus. The default value is false.

clearBoolean

An indicator of whether to clear the input. The default value is true, and takes effect only when the value of disabled is false.

onInput(e: Object) => void

The event that is triggered when users tap the keyboard.

onConfirm(e: Object) => void

The event that is triggered when users tap the Done button on the keyboard.

onFocus(e: Object) => void

The event that is triggered when an element gets the focus.

onBlur(e: Object) => void

The event that is triggered when an element loses the focus.

onClear(e: Object) => void

The event that is triggered when users tap the Clear button.