使用textarea,手机测试,聚焦失败,键盘弹不出看,怎么办?
发布于 5 年前 作者 jqian 3090 次浏览 来自 问答

点击textarea区域,聚焦不了。

监听textarea上的catchtap事件,发现是可以触发的。也就是textarea真的被点击啦,为什么就是没聚焦???

子组件的调用(x-bottom-modal 是一个输入的弹出框):

<x-bottom-modal
    modalShow="{{modalShow}}"
 >
  <form slot="modal-content" report-submit="true" bindsubmit="onSend">
    <textarea
      name="content"
      class="comment-content"
      placeholder="评论"
      maxlength="140"
      auto-focus="true"
      focus="true"
      fixed="true"
      show-confirm-bar="false"
      cursor-spacing="5"
      bindtap="onClickTextarea"
      bindkeyboardheightchange="boardheightchange"
    ></textarea>
    <button class="send" form-type="submit">发送</button>
  </form>

 </x-bottom-modal>

组件x-bottom-modal:

<view class="modal" hidden="{{!modalShow}}" catchtap="onClose"><!-- 遮罩层 -->
  <view class="panel" catchtap="onFocus">
    <i class="iconfont icon-shanchu icon-clear" catchtap="onClose"></i>
    <slot slot="modal-content"></slot>
  </view>
</view>

预期:

实际(聚焦失败)

实际上,我两处引用了同一个组件,一个可以聚焦一个不行,(ㄒoㄒ),各路大神,who can help me?


1 回复

问题已解决。具体原因也不知道。

就是我的一个子组件x-blog-ctrl,内使用子组件x-bottom-modal,x-bottom-modal内使用插槽,插槽内有textarea。

然后我的子组件x-blog-ctrl的父层是放在一个scroll-view标签内的x-blog-ctrl的父层是display:fixed),可能是受 scroll-view 标签影响吧??????

当我将子组件x-blog-ctrl的父层从scroll-view标签抽出来,放在scroll-view标签之外,然后问题就解决啦。

为啥?为啥?为啥?

回到顶部