WeChat applet - input box input

Code in bindevent.wxss:

/* pages/bindevent/bindevent.wxss */
.myinput{
    width: 50%;
    border:1px solid black;
}

Code in bindevent.wxml:

<!--pages/bindevent/bindevent.wxml-->
<view>事件绑定</view>
<text>{
   
   {name}}</text>
<input class="myinput" bindinput="changeContent" value="{
   
   {name}}"/>
<button plain="true" bindtap="modify">修改</button>

class="myinput": Set the style class of the input box through the class attribute. You can define the style of the input box through the style class in WXSS.

bindinput="changeContent": Bind the input event of the input box to the event handler named changeContent through the bindinput attribute. When the user enters content in the input box, the changeContent function is triggered.

Note that you use changeContent instead of changeContent() when binding events. For convenience when writing, it is usually written as changeContent(), but this is an abbreviation. All should be written as changeContent: function(), which is as shown in the figure. From the expansion, we can find that () is a function of others, so the name of the custom event is changeContent. In actual writing, ":function" can be omitted.

value="{ {name}}": Set the default value of the input box through the value attribute. In this example, name is a variable that will dynamically determine the default value of the input box during data binding.

Code in bindevent.js:

Page({
    data:{
        name:"张三"
    },
    modify: function(){
        this.setData({
            name:"李四"
        })
    },
    changeContent (e){
        console.log(e.detail.value)
        this.setData({
            name:e.detail.value
        })
    }
})

 

 Extract text box information: e. detail.value

When the content of the input box changes, the latest input box content can be obtained through the detail.value property of the event object e. You can understand this code by searching by path with the following figure: By constantly modifying the content of the input text box, it is found that the value of the value contained in the detail changes as the content of the text box changes.

 Overall operating effect:

The above is the method of binding events to obtain text box information. If you find it troublesome, you can use model: value="{ {} }" to obtain it. For example, add the following code to bindevent.wxml. At this time, the input box will achieve the same effect as the above method.

<input class="myinput" model:value="{
   
   {name}}"/>