微信小程序 - 按钮文本框 “giao-text”

最近因为体验了微信小程序 “百万工具箱” 里面的正则表达式工具，感觉到手机端输入正则表达式中的特殊字符十分的繁琐（反人类）。思前想后，决定撸一个可以解决繁琐输入的文本框组件。

不多说，先上开源地址吧：

npm https://www.npmjs.com/package/giao-text

github https://github.com/oloshe/giao-text

普通字符使用自带输入法输入，正则表达式常用字符（如：\ | $ ^ ）利用组件提供快速输入。

理清大概流程之后，先从左侧（focus in input）入手。

在这种情况下 setText 必须等两个函数都调用完毕再调用，因为 setText的两个参数要分别从 blur 和 tap 事件获取。那么确认一下顺序，通过赋值的方法把第一个参数存起来，到第二个事件调用的时候再执行 setText 函数不就行了？

如果这时你按照这个结果去设计，你就掉坑了！ 手机调试时输出的结果刚好时相反的！ 所以必须不管哪个函数先调用，都要等到两个函数调用完毕再执行 setText。所以在某一个函数加 if 判断是不可行的。但是在两边都加 if 判断又显得十分地不优雅，那怎么办呢？

_blurEvent, _tapEvent 监听器中 setTimeout 的作用是及时清空事件状态，200为该事件时存在时长，作用是让 blur 和 tap 事件的时间误差增大到 200ms，这样不管谁先谁后，两个函数在这 200ms 内都执行了就调用 setText 方法。

ps：如果在这期间某个方法执行多次也不会造成错误，都不会出错，因为数据都存在。

解决了左侧（focus in input）的问题，右侧（focus not in input）的问题就迎刃而解，只需要在 _text 监听器时判断是否有焦点，有焦点就是左侧的问题，如果没有焦点，则直接执行 setText 方法，因为他并不需要等待 blur 函数 或者 _cursor 的值，因为焦点不在输入框上，不会触发 blur 事件，而 cursor 的值直接取即可，cursor 值不会清除。

至此，初定的需求已经解决了。该组件将会不断完善，一直在往可拓展性、实用性的方向发展。

该组件目前解锁了很多实用有趣的功能！将会在 微信小程序“百万工具箱” 最新版本的 正则表达式 中应用，感兴趣的小伙伴欢迎前来一看！

先上一张图

如图1-1所示，想做一个上面图片上的搜索框，很容易想到上面搜索框的布局方式就是，input框占满整个行间，然后清空按钮通过absolute定位到input框上面，然而这样的布局方式在小程序真机测试中是有问题的，问题描述如下：

问题所在： 当input框处于聚焦状态时，及键盘属于拉起状态。点击清空按钮是无法清空input框里的数据的，简单的说就是此时加在清空按钮上的点击，触摸等事件并不会触发。只有当input框失去焦点时及键盘属于隐藏状态时，清空按钮上的事件才能被触发。

原因所在：小程序中当input框属于聚焦状态时，会有个层级的提升，它的层级是最高的，会比覆盖在他上面的标签层级高，因此此时点击清空按钮时实际上点击的还是input框。只有当input框失去焦点时才会恢复到正常的层级，此时上面的覆盖标签会比input框层级高

当初以为是组件问题，结果采用小程序上的 cover-image ， cover-image 组件也无法解决问题。

解决办法：

因此我们得使用图1-2的布局方式，采用正常的左右布局的方式。input框和按钮各占整行的一部分，然后通过css去使input框看上去是占用一整行，清空按钮覆盖在上面，对于前端人员来说还是很好写的哈。

可能是你的微信版本太老旧了，还有可能是你没有找对入口，不知道搜索的标签在哪，下面来教你如何 *** 作：

更新版本

1、打开手机微信，点击左下角的『我』；

2、在这个页面找到『设置』；

3、往下滑动找到『关于微信』；

4、点击『检查新版本』，下载最新的版本。我目前用的最新版本是8.0.27

找到搜索小程序按钮

1、更新完成后重新打开微信，在消息页面的右上角有个搜索图标，点击；

2、进入里面点击『小程序』，输入你要找的小程序名称进行搜索就可以了。

3、可以直接在消息页面这里按住屏幕，往下滑会拉拽出这个搜索小程序的按钮。

上面这两种做法都可以找到小程序按钮入口。

---