微信小程序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 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
使用AOP改善javascript代码
May 01 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
常用python编程模板汇总
2016/02/12 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
详解python变量与数据类型
2020/08/25 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
合同范本之电脑出租
2019/08/13 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL