收藏
回答

textarea在页面底部时,调起键盘后textarea完全被遮挡!

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug textarea 客户端 Android 6.6.7 1.9.97


textarea官方实例,修改 <viewclass="page-section">为<viewclass="page-section"style='margin-top:800px;'>后textarea处于页面底部,textarea获取焦点激活键盘,键盘会把整个textarea遮挡,无法看见输入的内容。


<view class="page-body">

<view class="page-section" style='margin-top:800px;'>

<view class="page-section-title">输入区域高度自适应,不会出现滚动条view>

<view class="textarea-wrp">

<textarea bindblur="bindTextAreaBlur" auto-height />

view>

view>


<view class="page-section">

<view class="page-section-title">这是一个可以自动聚焦的textareaview>

<view class="textarea-wrp">

<textarea auto-focus="true" style="height: 3em" />

view>

view>

view>


后来加上了cursor-spacing ,发现在textarea不起作用,不单cursor-spacing不起作用,

show-confirm-bar 也是不起作用的。



<textarea style="height: 3em" placeholder="我要对此次活动服务评价..."  show-confirm-bar='false' cursor-spacing="120"/>


后来经过我仔细检查后,发现是show-confirm-bar的“”完成“”栏,遮挡住了光标,上截图。





仔细查看上图,会发现完成栏遮挡住了光标。




图片可以隐约看到光标处的文字。


测试机型华为荣耀6X,android版本7.0 ,EMUI版本 5.0.2。


在线等解,折腾2天了 还是没有解决!


后又经过测试,把 <viewclass="page-section"style='margin-top:800px;'> 修改为 <viewclass="page-section"style='margin-top:200px;'> textarea 不在底部的时候,cursor-spacing是起作用的,但是show-confirm-bar无论怎么设置,都没有用。




最后一次编辑于  2018-06-08
回答关注问题邀请回答
收藏

7 个回答

  • 2019-06-12

    我也遇到了类似问题,我的解决方法是:不自动上推页面,键盘弹出后重新定位textarea布局。通过绑定focus和blur事件,动态设置其高度。

    1. 首先不自动上推页面,adjust-position='{{false}}'

    2. 获取当前窗口TotalHeight,获取弹出的键盘高度keyBordHeight。此时可视区域高度VisualHeight = TotalHeight - keyBordHeight

    3. 在textarea输入文字时,将页面margin-top设置为负值,让当前输入textarea刚好在窗口顶部,设置当前textarea的高度为VisualHeight。

    我的小程序,就是这么优化文字输入的,扫码体验一下看看嘛。


    该小程序,目前处于调试阶段,该解决方案我实测有效,估计明天(2019-6-13)再次更新上线。


    参考代码

    // js代码
     
      data: {
        focus: false,
      },
     
    // 优化输入体验
      onFocus: function (event) {
        console.log('focus');
        console.log(event);
      
        var keybordH = event.detail.height;
        console.log('键盘高度', keybordH);
      
        var windowHeight = wx.getSystemInfoSync().windowHeight;
        console.log('窗口高度', windowHeight);
      
        //设置输入区域高度
        var inputHeight = windowHeight - keybordH;
      
        this.setData({
          inputHeight: inputHeight + 'px',
          focus: true,
        })
      },
      onBlur: function () {
        console.log('blur');
        this.setData({
          focus: false,
          inputHeight: '100%',
        })
      },


    <!--渲染层-->
    <view class=" {{!focus ? '' : 'no-comment-uploader'}}" >textarea上面的组件</view>
    <textarea
          class='comment-text'
          placeholder='捕捉灵感,记下脑中闪过的想法!(限500字)'
          bindinput='onInput'
          maxlength='500'
          bindblur='onBlur'
          bindfocus='onFocus'
          adjust-position='{{false}}'
          style="height:{{inputHeight}};"
          cursor-spacing='30rpx'>
    </textarea>


    /* 核心css */

    .no-comment-uploader{
      margin-top: -400rpx;
    }


    如果高度已知,可以通过加class来设置负值margin。如果高度未知,通过js获取textarea上方组件的高度值,用内联样式,动态负值。

    2019-06-12
    有用 3
    回复
  • 血海飘香
    血海飘香
    2018-07-03

    show-confirm-bar="{{false}}"

    有效

    2018-07-03
    有用 1
    回复
  • 彦斌
    彦斌
    2022-11-21

    几年过去了,这个问题还是没解决. textarea如果在底部,输入法完全给挡住.

    2022-11-21
    有用
    回复
  • Joy 。
    Joy 。
    2018-10-26

    解决了嘛?

    2018-10-26
    有用
    回复
  • 大煜哈
    大煜哈
    2018-09-21

    你好 ,怎么解决的?

    2018-09-21
    有用
    回复
  • 赖晓槐
    赖晓槐
    2018-07-07

    请问解决了吗?

    2018-07-07
    有用
    回复
  • cunjinli
    cunjinli
    2018-06-08

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-06-08
    有用
    回复 3
    • 赖晓槐
      赖晓槐
      2018-09-21

      wechatide://minicode/loYaALmX7Io1

      2018-09-21
      回复
    • 队长
      队长
      2020-11-04
      问题过去两年多了,还没有回复?
      2020-11-04
      回复
    • momo
      momo
      2022-12-16
      2022年都要过去了 请问这个还没有解决嘛?
      2022-12-16
      回复
登录 后发表内容