Shulou(Shulou.com)06/01 Report--

This article mainly introduces WeChat Mini Programs how to obtain the relevant knowledge of the input box, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe everyone will gain something after reading this WeChat Mini Programs article on how to obtain the input box. Let's take a look.

Input

Enter the box.

The default value of the attribute name type indicates whether the initial content of the minimum version valueString input box typeString "text" input type passwordBooleanfalse is the password type placeholderString input box empty placeholder placeholder-styleString specifies the style of placeholder placeholder-classString "input-placeholder" specifies whether the style class disabledBooleanfalse of placeholder disables maxlengthNumber140 maximum input length, when set to-1 does not limit the maximum length cursor-spacingNumber0 specifies the distance between the cursor and the keyboard, in px. Take the minimum distance from the bottom of the input and the distance specified by the cursor-spacing as the distance between the cursor and the keyboard auto-focusBooleanfalse (about to be discarded, please use focus directly) automatically focus, pull up the keyboard focusBooleanfalse to get the focus confirm-typeString "done" set the text of the keyboard button in the lower right corner of the keyboard whether to keep the keyboard away when you click the button in the lower right corner of the keyboard 1.1.0bindinputEventHandle triggers the input event when the keyboard is typed Event.detail = {value: value}, the handler can directly return a string that replaces the contents of the input box. Triggered when the bindfocusEventHandle input box is focused, event.detail = {value: value} bindblurEventHandle input box loses focus, event.detail = {value: value} bindconfirmEventHandle triggers when the finish button is clicked, event.detail = {value: value}

Valid values for type:

Value description text text input keyboard number numeric input keyboard idcard ID card input keyboard digit numeric keyboard with decimal point

Valid values for confirm-type:

The value indicates that the button in the lower right corner of send is "send", the button in the lower right corner of search is "search", the button in the lower right corner of next is "next", the button in the lower right corner of go is "go", and the button in the lower right corner of done is "done".

Sample code:

To make the input box focus, you enter: {{inputValue}} / / input.jsPage ({data: {focus:false, inputValue: ""}, bindButtonTap:function () {this.setData ({focus: true})}, bindKeyInput:function (e) {this.setData ({inputValue:e.detail.value})}, bindReplaceInput:function (e) {var value = e.detail.valuescape var pos = e.detail.cursor If (pos! =-1) {/ / the cursor is in the middle var left = e.detail.value.slice (0Magnepos); / / calculates the position of the cursor pos = left.replace (/ 11compg recording 2') .length } / / return the object directly, you can filter the input, and at the same time you can control the position of the cursor return {value:value.replace (/ 11Accordant g recording 2'), cursor:pos} / / or return the string directly, with the cursor at the end of / / return value.replace (/ 11pm g recording 2'),}}) Bug & Tip

Bug: Wechat version 6.3.30, invalid focus attribute setting

Bug: Wechat version 6.3.30, placeholder has ghosting problems when focusing.

Tip: the input component is a native component, and the font is a system font, so font-family cannot be set

Tip: avoid using css animation during input focus

This is the end of the article on "how to get the input box for WeChat Mini Programs". Thank you for your reading. I believe you all have a certain understanding of "how WeChat Mini Programs obtains the input box". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.