微信小程序bindinput与bindsubmit的区别实例分析

所属分类: 网络编程 / JavaScript 阅读数: 1807
收藏 0 赞 0 分享

本文实例讲述了微信小程序bindinput与bindsubmit的区别。分享给大家供大家参考,具体如下:

实际上的话,bindinput还有bindsubmit是没有任何的可比性的,但是两者还是常常被人一起比较,为啥?

比如一个简单的搜索框,你是愿意选择使用bindinput还是使用bindsubmit?,虽然一个是表单,一个是文本输入框,但是两者都有一个共同点,就是可以去获取到用户的输入信息。这个时候,问题来了,区别在哪儿?

最简单的一段代码在下面:

<form bindsubmit='input1input'>
 <input name="input1" placeholder='这个是输入框' style='border:1rpx solid #000;'></input>
 <button form-type="submit">提交按钮</button>
</form>
<input bindinput='input2input' placeholder='这个是输入框' style='margin-top:200rpx;border:1rpx solid #000;'></input>
<button>提交按钮</button>

// pages/input/input.js
Page({
 data: { input1: "", input2: "" },
 input1input: function (e) {
  console.log(e);
  console.log(e.detail.value.input1)
 },
 input2input: function (e) {
  console.log(e);
  console.log(e.detail.value);
 }
})

甚是简单,那么问题来了,区别在哪儿?

当然,暂时的区别只有一个,就是console.log比较多,哈哈,开玩笑的。根据深圳那边客户的反应,说是使用input的时候,移动光标到一个地方后,输入一个文字,会重新移动光标的尾部,当然,不是上面的那些代码了,上面的代码是没问题的

有问题的是下面的代码:

// pages/input/input.js
Page({
 data: { input1: "this is the value for input1", input2: "this is the value for input2" },
 input1input: function (e) {
  console.log(e);
  console.log(e.detail.value.input1);
  this.setData({ input1: e.detail.value.input1 })
 },
 input2input: function (e) {
  console.log(e);
  console.log(e.detail.value);
  this.setData({ input2: e.detail.value })
 }
})

<form bindsubmit='input1input'>
 <input value='{{input1}}' name="input1" placeholder='这个是输入框' style='border:1rpx solid #000;height:100rpx;'></input>
 <button form-type="submit">提交按钮</button>
</form>
<input value="{{input2}}" bindinput='input2input' placeholder='这个是输入框' style='height:100rpx;margin-top:200rpx;border:1rpx solid #000;'></input>
<button>提交按钮</button>

其实原因很简单,就在一个地方,就是刷新界面的this.setData这而,为啥?因为你刷新后,value值修改,然后呢?

然后页面就刷新了,再然后呢?再然后就是因为你设置的是光标自动移动到最后一步,所以,最好的话是使用input的时候要小心点咯,当然我不是说使用input没有使用submit好,只是适应场景不同而已,比如没必要使用bindinput的时候去刷新界面,或则说我个人比较偏爱使用bindsbmit吧,。

希望本文所述对大家微信小程序开发有所帮助。

更多精彩内容其他人还在看

jQuery控制input只能输入数字和两位小数的方法

这篇文章主要介绍了jQuery控制input只能输入数字和两位小数的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue模板语法中数据绑定的实例代码

这篇文章主要介绍了Vue模板语法中数据绑定的实例代码,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
收藏 0 赞 0 分享

详解 微信小程序开发框架(MINA)

小程序使用的是MINA框架,目的是通过简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。 这篇文章主要介绍了微信小程序开发框架(MINA),需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery实现的点击显示隐藏下拉菜单功能完整示例

这篇文章主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

angular4应用中输入的最小值和最大值的方法

这篇文章主要介绍了angular4应用中输入的最小值和最大值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

150行代码带你实现微信小程序中的数据侦听

在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器,感兴趣的朋友跟随小编一起看看吧
收藏 0 赞 0 分享

javascript异步编程的六种方式总结

这篇文章主要介绍了javascript异步编程的六种方式总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS实现的自定义map方法示例

这篇文章主要介绍了JS实现的自定义map方法,结合实例形式分析了javascript自定义map相关的json数组定义、遍历、添加、删除、读取等相关操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

微信小程序云开发(数据库)详解

使用云开发开发微信小程序、小游戏,无需搭建服务器,这篇文章主要为大家详细介绍了微信小程序云开发数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JS简单数组排序操作示例【sort方法】

这篇文章主要介绍了JS简单数组排序操作,结合实例形式分析了javascript使用sort方法进行数组排序的相关操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多