WeChat applet (17) input component details, Applet input

Applet (17) input component details, Applet input

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

<! -- A style with a higher priority will overwrite the same attributes as the class --> <view class = "inputView" style = "margin-top: 40% "> <input class =" input "type =" number "placeholder =" enter an account "placeholder-style =" color: red "bindinput =" listenerPhoneInput "/> </view> <view class =" inputView "> <input class =" input "password =" true "placeholder =" enter the password" placeholder-style = "color: red "bindinput =" listenerPasswordInput "/> </view> <button style =" margin-left: 15rpx; margin-right: 15rpx; margin-top: 50rpx; border-radius: 40rpx "type =" primary "bindtap =" listenerLogin "> logon </button>

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;}