为了账号安全,请及时绑定邮箱和手机立即绑定

关于微信小程序文档中input组件示例代码的问题?

/ 猿问

关于微信小程序文档中input组件示例代码的问题?

那时的惘然 2018-10-09 16:21:53

文档链接 https://developers.weixin.qq.com/miniprogram/dev/component/input.html

示例代码中有一个bindReplaceInput方法如下,这段代码的作用是:如果我连续输入2个数字1,11会变成2

bindReplaceInput: function (e) {
    
    var value = e.detail.value 
    var pos = e.detail.cursor
    
    var left   
    if (pos !== -1) {
      // 光标在中间
      left = e.detail.value.slice(0, pos);
      // 计算光标的位置
      pos = left.replace(/11/g, '2').length; 
    }

    // 直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置
    return {
      value: value.replace(/11/g, '2'),
      cursor: pos
    }
  }

我的问题是:

1. 代码中有一段 if(pos !== -1) ,想请问为什么 pos 的值要和 -1 来比较呢?看起来 pos 的值是不会等于负数的嘛

2. 在 if 的语句段中,如果 left 的值不包含 11 ,left.replace(/11/g,'2').length 由于找不到11,也无法把11替换成2,这个语句为什么不会报错呢

新手,恳请各位大佬多多指教,感恩!


查看完整描述

1 回答

已采纳
?
聪明的汤姆

e.detail.cursor获取的是 指定focus时的光标位置,在input事件中,确实不会存在-1的情况,最低是0,当value长度为0的时候,至于这里为什么要判断-1,可能是为了代码的严谨性吧


最后面正则/11/g如果匹配不正确是不会报错的,匹配失败则返回原来的值,如图

https://img1.mukewang.com/5bbc6c450001198402720094.jpg

查看完整回答
1 反对 回复 2018-10-09
  • 那时的惘然
    那时的惘然
    kai老师,还有一个小问题希望指教:在这段代码里的return部分,函数把 value 和 cursor 的值 return 给谁了呢?这点不太懂,希望老师可以讲讲^_^
  • 聪明的汤姆
    聪明的汤姆
    返回给当前的input控件,你理解成给当前input设置value和cursor的值就好了 return { value: value.replace(/11/g, '2'), cursor: pos } 你看这里,其实就是设置value的值(这里是输入两个1就替换成2)跟cursor的值 实在不懂,你可以把他写死 return { value: '不管我输入什么,都会显示这行文字', cursor: pos } 如果光标也写死,那么不管你输入什么光标的位置都在1 return { value: '不管我输入什么,光标位置都在1', cursor: 1 }
  • 那时的惘然
    那时的惘然
    感谢kai老师的回答,已经懂了,感恩,希望慕课网可以加上打赏功能,以方便表达对老师的感谢!
点击展开后面1

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信