微信小程序Input组件聚焦问题兼容

最新推荐文章于 2024-06-28 13:54:31 发布

面条君1995

最新推荐文章于 2024-06-28 13:54:31 发布

阅读量4.6k

点赞数 4

分类专栏：学习

本文链接：https://blog.csdn.net/sinat_41627898/article/details/107382210

版权

本文探讨了微信小程序中Input组件聚焦问题及如何实现清除内容并自动弹起键盘的功能。在实现过程中，作者指出需要在清除输入值后的回调中设置focus，并在iOS设备上考虑延迟处理。此外，还提到了真机与开发工具事件执行顺序的差异、模态框中的样式问题以及Android和iOS的样式兼容性问题。最后，作者强烈建议避免使用UI框架的Input组件，以减少潜在的问题。

摘要由CSDN通过智能技术生成

微信小程序Input组件聚焦问题兼容

前言

最近小程序做得很频繁，无论是原生的还是使用跨端框架。然后一直以来都被小程序的Input组件搞得死去活来，最近在搞的小程序普遍都有表单，其中的Input清除内容以及聚焦弹起键盘的兼容坑得我死去活来，小程序的Input组件我愿称其为最坑组件，没有之一。

需求

先说一下要实现的需求，就是实现一个Input框的清除按钮，要求清除Input框内容并且在清除内容后自动弹起键盘，要求清除按钮只有在输入框聚焦且内容不为空时显示。需求很容易理解，且我一开始以为很简单。。。

实现过程代码

直接放代码了，里面的实现方法实属无奈，一些要注意的点都写注释里面了

<!--index.wxml-->
<view class="container">
	<input bindfocus="handleFocus" bindinput="handleInput" bindblur="handleBlur" focus="{
    {focus}}" value="{
    {value}}" class="input" />
	<button wx:if=