微信小程序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 相关文章推荐
javascript Keycode对照表
Oct 24 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
分享Javascript实用方法二
Dec 13 Javascript
node实现基于token的身份验证
Apr 09 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
js实现小时钟效果
Mar 25 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
JS.findElementById()使用介绍
2013/09/21 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
JS中this上下文对象使用方式
2016/10/09 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
浅谈Angular路由复用策略
2017/10/04 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Python中的self用法详解
2019/08/06 Python
python 三元运算符使用解析
2019/09/16 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
医学专业自荐信
2014/06/14 职场文书
财务管理专业自荐书
2014/09/02 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书