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

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

浏览量:785 时间: 来源:谭少居然

小程序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(){    //内容我就不写了,反正是触发的事件  }})

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎