小程序输入框取值、清空及调用小键盘按键提交事件详解

小程序input取值

       一般情况下，输入框可以直接通过value来取值和更改

<input class='leftMove' value='{{name}}' placeholder='请输入您的姓名'></input>

小程序input修改值

小程序修改input不一样，小程序设置value只能设置其加载初始值，而输入修改则必须通过事件监听来修改

html内容

<input class='leftMove' value='{{name}}' bindinput="name" placeholder='请输入您的姓名'></input>

js内容

Page({
  data: {
    name:'张三'//绑定的输入框文本
  },
  name: function(e) {
    this.setData({
      name: e.detail.value//将input至与data中的name绑定
    })
  }
})

通过name事件修改name的值，bindinput的事件名不必与初始绑定值一致（本人这就是图个方便）

小程序清空input值

一般情况下，通过设置初始值为空就可以做到清空，但是这个方法在小程序上并不太适用，我们需要将input与button装在一个form表单中，button触发reset,form通过bindreset接到reset事件后触发清空的res方法，值得注意的一点是，即便input框内容通过reset清空，但我们还是需要在res方法中将input绑定的值重置。

wxml

<form bindreset="res">
  <input value="{{name}}"  bindinput="name" placeholder="请输入您的姓名"/>
  <button form-type="reset">发送</button>
</form>

js

Page({
  data: {
    name:''//绑定的输入框文本
  },
  name: function(e) {
    this.setData({
      name: e.detail.value
    })
  },
  res:function(){
    var that=this
    //如果有输入的回调
    if(this.data.name){
     wx.request({
      url:"",
      method:"",
      header: {},
      data: {},
      success: (res) => {
        console.log(res)
      }
     })
      
    }else{
    //提示输入为空或直接报错
    }
    this.setData({
        name:''//将data的name值清空
    });
  }
})

小程序input调用键盘事件

由于手机键盘的特殊性，大多数情况下手机键盘都会自带有小键盘搜索的事件，一般情况下，也可能会将enter键作为输入的确定

在小程序里面提供了对应的方法

bindconfirm ：点击小键盘上的搜索按钮就触发要执行的方法

而enter事件的话，需要在form内设置bindsubmit事件

列个搜索的例子

wxml

 <view class="search">
    <form bindreset="res" bindsubmit="search">      
      <view class="df search_arr">
        <icon class="searchcion" size='20' type='search' value="{{search}}" bindtap='Search'></icon>
        <input class="searchdo" bindconfirm="search" placeholder="你想要的都在这里" bindinput="input"/>
      </view>
    </form>  
   </view>

js

Page({
  data: {
    search:''//绑定的输入框文本
  },
  Search: function(e) {
    this.setData({
      search:'',
    })
  },
  //清空输入框
  res:function(){
    var that=this
    //如果有输入的回调
    if(this.data.search){
     })
      
    }else{
    //提示输入为空或直接报错
    }
    that.setData({
        search:''//将data的name值清空
    });
  },
  //点击搜索执行的事件
  search:function(){
    //内容我就不写了，反正是触发的事件
  }
})

以上就是个人对小程序输入框的一些小总结，欢迎大家指正评论