WeChat applet (17) input component details

This article mainly introduces the detailed information about the input component of the applet. For more information, see

The input box is frequently used... If the style is used, you can customize a view. There are not many input attributes. you need to test them slowly and try again.

Main Attributes:

Wxml

 
 
  
  
 
  
   Login

Js

Page ({/*** initialization data */data: {phone: '', password:'',},/*** enter the listening mobile phone number */listenerPhoneInput: function (e) {this. data. phone = e. detail. value;},/*** listen for password input */listenerPasswordInput: function (e) {this. data. password = e. detail. value;},/*** listener logon button */listenerLogin: function () {// Print the revenue account and password console. log ('mobile phone number: ', this. data. phone); console. log ('password: ', this. data. password) ;}, onLoad: function (options) {// parameters brought about by page navigation during page initialization options}, onReady: function () {// page rendering completed }, onShow: function () {// page display}, onHide: function () {// page hide}, onUnload: function () {// page close }})

Wxss

.input{ padding-left: 10px; height: 44px;} .inputView{ border: 2px solid red; border-radius: 40px; margin-left: 15px; margin-right: 15px; margin-top: 15px;}

For more information about the input component of mini programs (17th), refer to the PHP Chinese website!