Important parameters
Initial input in the value input box
The type of the type input box. If it is text, you don't need to fill it in
1, number
2. idcard ID card
3. digit number with decimal point
4. Safe password security keyboard
Password password type, no need to fill in
Placeholder placeholder text, or prompt text
Placeholder class binds a class to the prompt text
maxlength sets the maximum length. If it is not set to 140, it can be input indefinitely if it is set to - 1
The confirmation text of the confirm type keyboard can only be used for the default type, that is, the text mode
Binding input event
bindfocus binding focus event
bindblur binding lose focus event
bindconfirm binding confirmation event
Tip: the default input tag only needs a single tag, but it is not allowed to exist in the applet. Therefore, you must manually add a closure for it, that is, write it in the form of < input / >.
Simple use
<!-- This is the simplest one without any hint input label --> <input /> <!-- add to placeholder Suggestive input label, input It's best to add them all placeholder As a reminder, it's hard to know input Where is the label --> <!-- be careful, type="text"It is a default value and does not need to be filled in, but the developer tool of general applet will automatically add it for you. Since it helps you add it, there is no need to delete it, so you can choose type="text". --> <input type="text" placeholder="Enter text here" /> <!-- Be careful, password Is a separate attribute, not a type Do not change the type of password Add to type Appears as a type --> <input type="text" password placeholder="Enter the password here" /> <!-- confirm-type The function of is to change the text when the keyboard is submitted. This function is generally useful. It may be used when doing some interesting interactions. It is generally not necessary to use it at ordinary times --> <input type="text" confirm-type="send" placeholder="See if your keyboard button turns to send" />
Four events
bindinput event
Bindinput is very important because we usually need to get the input content through the bindinput event. The input content will be synchronously updated to e.detail.value
The wxml code is as follows
<view>The content you entered is:{{ msg }}</view>
<input type="text" placeholder="bindinput test" bindinput="input_event" />js code is as follows
Page({
data: {
msg: ""
},
onLoad: function (options) {
},
input_event(e){
this.setData({msg: e.detail.value});
}
})Bindfucus event
Bindocus is triggered when the input box gets focus. Of course, people who haven't touched the program may not understand what is getting focus. In short, it means that you get focus by clicking on which one is active now.
Generally, it can be used to add style to the input box. For example, when you click on which input box, set which input box to yellow. Generally, it will not be used alone, but can be used together with bindblue. So we put the code in and bindblue and show it together.
Bindblue event
A very important function of losing focus event is to use it for front-end verification (if you can't understand what the front-end is, you can use it for applet verification). For example, we often encounter account registration, enter the password, and after entering, we get a prompt that the password we entered is unqualified. How do they know that we have entered? By losing focus.
For example, you can use it like this. The wxml code is as follows
<input type="text" placeholder="Get focus and lose focus test" bindfocus="focus_event" bindblur="blur_event" style="{{ stl }}" />js code is as follows
Page({
data: {
stl: ""
},
onLoad: function (options) {
},
focus_event(){
this.setData({stl: "background-color: yellow;"})
},
blur_event(){
this.setData({stl: ""});
}
})The function realized by the above code is that clicking will turn yellow, and not clicking will not turn yellow.
bindconfirm event
I have sorted out the use of confirm type and the binding of bindconfirm event separately. Click here to view it.
Check the use of confirm type and bindconfirm
Three modes
In the previous important parameters, it was mentioned that the type of type can be set to number, digit or idcard.
I was very excited when I first saw this. I thought this idcard mode must be the verification of my own ID card. If so, I don't have to write the verification rules myself. However, the reality is very cruel. After I really understood it, I found that it was just a change of keyboard.
In short, if you write number, you will only be given a numeric keyboard. If you write idcard, you will only be given a numeric keyboard plus X, that's all. emmmm, ah, Xiao Wu Ming is lost in thought...
But fortunately, it can help us input numbers conveniently and quickly, so this mode is still a little useful, probably.
I'm Wu Ming. If you like, please pay attention to me. There are more articles about applet production in my personal center!