Long Password

2023-03-28 12:11

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.
last	Boolean	An indicator of whether the input box is the last one. The default value is `false`.
value	String	Initial content.
name	String	Component name, which is used to obtain data by submitting the form.
placeholder	String	Placehoder.
placeholderStyle	String	Style of the placeholder.
placeholderClass	String	Style class of the placeholder.
disabled	Boolean	An indicator of whether to disable the function of clearing the password. The default value is `false`.
maxlength	Number	Maximum length of the password. The default value is `140`.
focus	Boolean	An indicator of whether to get focus. The default value is `false`.
clear	Boolean	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.