微信小程序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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
动态刷新 dorado树的js代码
Jun 12 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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/08/27 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Python实现数值积分方式
2019/11/20 Python
Python输出指定字符串的方法
2020/02/06 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
个人求职自荐信范文
2014/06/20 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
小学班级管理心得体会
2016/01/07 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
JavaScript实例 ODO List分析
2022/01/22 Javascript
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript