详解小程序input框失焦事件在提交事件前的处理


Posted in Javascript onMay 05, 2019

无论是小程序还是平常的Html页面,input文本框我们用到的次数都很多,这一篇文章主要是讲关于小程序中文本框聚焦自动拉起输入键盘的一些使用心得。

为什么我需要聚焦拉起键盘呢?为什么我弃用失焦事件呢?

因为在我的小程序文章中提供了评论文章的功能,昨天空闲下来我想将回复评论的功能也做一下,我想让回复和评论同时共用一个文本框如下图一,我来说明一下的操作:当我们进入文章界面的时候,输入框模式默认是评论文章的,但是如果我们点击回复就会出现图二的情况,在文本框出现回复XXX的评论,这里有个过程:当我们点击回复的时候首先让该文本框聚焦(focus="{{focus}}为true的时候就会聚焦),手机上会自动拉起输入框,然后在该文本框上赋值"回复XXX的评论"。为什么要文本框赋值呢?因为我用"文本内容.indexOf("[回复XXX的评论:]")==0"来区分是回复文章还是回复评论。

在一开始的时候我并非这样设计的,我当时想的是:既然点击回复会聚焦拉起文本框,那么失焦的时候我在把文本框改为评论文章吧,但是测试的时候就出现了一个问题:我点击回复的时候文本框失焦触发的方法在回复按钮触发之前,也就说回复评论变成了评论文章,当时想到的一个解决办法是定时器,让失焦事件方法体延迟执行,虽然达到了效果,但是也有问题:用户回复评论的时候,突然不想评论了,点击屏幕的其他地方,此时应该立刻按钮变成发表,文本框的placeholder变成评论文章,但是由于延迟所以会过一会才变回去,不太友好。那么怎么办呢?我就想起了CSDN回复评论的功能,我们回复评论的时候会带上replyXXX的效果,我就想这个是不是判断回复文章还是回复评论的区别,然后我就这样做了。我们往下看具体的实现

详解小程序input框失焦事件在提交事件前的处理      

详解小程序input框失焦事件在提交事件前的处理

那我们来具体的看代码:

<input bindinput="wxSearchInput" focus="{{focus}}" value="{{content}}" class="wxSearch-input search-input" placeholder='{{comorfeed}}' cursor-spacing='20'/>
 
<button class="wxSearch-button items" style='display:flex' size="mini" plain="true" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">{{insertorfeed}}</button>

上面就是文本框和按钮以及绑定的事件,我们主要来看JS:

首先我们要看一下点击回复拉起键盘的事件:代码里面id为文章评论的id,name为评论人的姓名,focus就是聚焦设为true,insertorfeed是按钮显示的值,一开始为评论,点击回复之后按钮变成回复,placeholder变成回复评论,content自动加上"[回复XX的评论]".

feedbackCom: function(e) {
  var id = e.currentTarget.dataset.id
  var name = e.currentTarget.dataset.name
  var index = e.currentTarget.dataset.index
  console.log(id + name + index)
  this.setData({
   id: id,
   index: index,
   focus: true,
   insertorfeed: "回复",
   comorfeed: "回复评论",
   content: "[回复" + name + "评论]:"
  })
 },

分析完点击回复的事件之后,我们看一下文本框输入的时候会触发的wxSearchInput方法:这个方法会首先setData文本框的值用于渲染,然后判断this.data.id,它作为是否点击回复的第一层判断,如果this.data.id存在,我们就要判断content是否含有"[回复XXX的评论]:",如果存在就说明是回复评论而不是文章(我们要主要indexOf==0才算回复评论,因为他要在最前面才为true,不是含有就为true)。如果不包含说明人为的删除了"[回复XXX的评论]:"此时我们就当它要回复文章了,然后清除有关回复的一切数据(有个小问题就是,我这里吧内容全部清除了,大家可以截取一下字符串,只把[回复XX的评论]给去掉)

wxSearchInput: function(e) {
  this.setData({
   content: e.detail.value
  })
//如果点击了评论的回复,this.data.id就会有值
  if (this.data.id) {
   console.log("存在点击回复")
//判断content是否含有"[回复XXX的评论]:"
   if (this.data.content.indexOf("[回复" + this.data.comment.commment[this.data.index].userName + "评论]:") == 0) {
    console.log("确定是回复评论" + this.data.comment.commment[this.data.index].userName)
   } else {
    console.log("存在点击回复,但是删除了,所以是评论文章")
    //清楚有关回复的一切数据
    this.setData({
     id: "",
     content: "",
     comorfeed: "评论文章",
     insertorfeed: "发表",
    })
   }
  } else {
   console.log("不存在点击回复,直接评论文章")
  }
 
 },

因为我们在输入的时候就做了一系列的判断,所以当我们提交的时候就非常容易了:首先判断内容是否为空,然后通过判断comorfeed来判定是回复文章还是回复评论。如果是回复评论那么我们提交之前应该把文本的前缀去掉

/**
  * 用户提交内容,获取用户信息
  */
 onGotUserInfo: function(e) {
  console.log("xxx1")
  /** 
   * 检查评论内容是否为空
   */
  if (!this.checkContent(this.data.content)) {
   return;
  }
  /** 
   * 如果用户授权,则能拿到数据,否则就是用户拒绝授权,那么提示无法评论
   */
  if (e.detail.userInfo) {
   if (this.data.comorfeed == "评论文章") {
    //发表评论
    console.log(this.data.comorfeed)
    allReq.userLogin(e.detail.userInfo.nickName, e.detail.userInfo.avatarUrl, e.detail.userInfo.gender, this.data.content, this.data.artilceId, 0);
   } else {
    console.log("回复评论")
    console.log(this.data.id)
    var co = this.data.content.split("[回复" + this.data.comment.commment[this.data.index].userName + "评论]:");
    console.log(co)
    allReq.userLogin(e.detail.userInfo.nickName, e.detail.userInfo.avatarUrl, e.detail.userInfo.gender, co[1], this.data.artilceId, this.data.id);
   }
   this.setData({
    content: "",
    id: "",
    comorfeed: "评论文章",
    insertorfeed: "发表",
   })
  } else {
   remind.modal("提示", '让小每认识你之后才能评论哦')
  }
 },

其实实现聚焦不难,有API我们很容易实现,有点麻烦的是一系列的判断,因为既然用到了聚焦那么肯定不单单只是拉起键盘那么简单你最终要实现的东西肯定还需要进一步的推进,此时到底是用失焦还是想我一样就需要你分析你的需求了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
微信小程序实现日历功能
Nov 27 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 #Javascript
小程序关于请求同步的总结
May 05 #Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 #Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 #Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 #Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 #Javascript
详解vue的双向绑定原理及实现
May 05 #Javascript
You might like
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
vue.js的安装方法
2017/05/12 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python监控键盘输入实例代码
2018/02/09 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Django实现单用户登录的方法示例
2019/03/28 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
家长寄语大全
2014/04/02 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
python非标准时间的转换
2021/07/25 Python
Elasticsearch 数据类型及管理
2022/04/19 Python
Redis实现分布式锁的五种方法详解
2022/06/14 Redis
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers