Shulou(Shulou.com)05/31 Report--

This article mainly explains "WeChat Mini Programs how to achieve input input box", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "WeChat Mini Programs how to achieve input input box" bar!

Realize the effect picture:

WeChat Mini Programs input box input

Attribute name type default value description valueString

The type of the content typeStringtextinput of the input box. Valid value: whether text,number,idcard,digit,time,datepasswordBooleanfalse is the password type placeholderString

Placeholder placeholder-styleString when the input box is empty

Specify the style of placeholder placeholder-classStringinput-placeholder specifies whether the style class disabledBooleanfalse of placeholder disables the maximum input length of maxlengthNumber140, sets it to 0 without limiting the maximum length of auto-focusBooleanfalse auto focus, and pulls up the keyboard. There can be only one input in the page that sets the auto-focus property focusBooleanfalse so that input gets the focus bindchangeEventHandle

When the input box loses focus, the bindchange event is triggered, event.detail= {value:value} bindinputEventHandle

In addition to the input box of type date/time, the input event, event.detail= {value:value}, is triggered when the keyboard is typed, and the handler can directly return a string that will replace the contents of the input box. BindfocusEventHandle

Triggered when the input box is focused, event.detail = {value:value} bindblurEventHandle

Triggered when the input box loses focus, event.detail = {value:value}

Sample code:

To make the input box focus, you enter: {{inputValue}} / / input.jsPage ({data: {focus:false, inputValue: ""}, bindButtonTap:function () {this.setData ({focus:Date.now ()})}, bindKeyInput:function (e) {this.setData ({inputValue:e.detail.value})}, bindReplaceInput:function (e) {var value = e.detail.value; 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 wx.hideKeyboard 2'), cursor:pos} / / or return the string directly, with the cursor at the last edge / / return value.replace (/ 11pm g recording 2'),}, bindHideKeyboard:function (e) {if (e.detail.value = = "123") {/ / put away the keyboard wx.hideKeyboard () }) Thank you for your reading, the above is the content of "how to achieve input input box for WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how WeChat Mini Programs realizes the input input box, and the specific use still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.