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


Posted in Javascript onApril 17, 2019

本文实例讲述了微信小程序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吧,。

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

Javascript 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 #Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 #Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 #Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 #Javascript
基于JS实现web端录音与播放功能
Apr 17 #Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 #Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 #Javascript
You might like
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python中使用PDB库调试程序
2015/04/05 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
python右对齐的实例方法
2020/07/05 Python
python 爬虫请求模块requests详解
2020/12/04 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
应届大学生求职信
2013/12/01 职场文书
银行批评与自我批评
2014/02/10 职场文书
初一新生军训方案
2014/05/22 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
2015年清明节活动总结
2015/02/09 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
python实现过滤敏感词
2021/05/08 Python