微信小程序，input输入内容双向绑定

德顺

发布于 2019-11-13 10:07:04

4.4K0

发布于 2019-11-13 10:07:04

文章被收录于专栏：前端资源前端资源前端资源

小程序如何实现input输入内容，实时改变标题内容。

小程序的 input 组件有一个 bindinput 属性。

官方的介绍如下：

键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。

首先给标题绑定一个变量，给input绑定一个 bindinput 事件，WXML代码如下：

<view class='ad-preview-comment'>{{adTitle}}</view>
<input placeholder='一句话介绍你的广告' bindinput="adInputChange" value=''></input>

JS部分：input输入内容改变，将 input 的值 e.detail.value 赋给变量 adTitle

Page({
  data: {
    adTitle: '广告描述',
  },
  adInputChange: function(e) {
    let that = this;
    if (e.detail.value.length < 1) {
      that.setData({
        adTitle: '广告描述',
      })
    } else {
      that.setData({
        adTitle: e.detail.value,
      })
    }
  },
})

这样就可以 input 输入内容，标题跟着实时变化了。