详解小程序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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
JS原形与原型链深入详解
May 09 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
PHP实现伪静态方法汇总
2016/01/13 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python 对象中的数据类型
2017/05/13 Python
解读python如何实现决策树算法
2018/10/11 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
Python中super().__init__()测试以及理解
2021/12/06 Python
Python OpenGL基本配置方式
2022/05/20 Python