textarea在页面底部时，调起键盘后textarea完全被遮挡！
发布于 7 年前 作者 wlei 863 次浏览 来自 问答

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无论怎么设置，都没有用。




6 回复

请问解决了吗？

我也遇到了类似问题，我的解决方法是：不自动上推页面，键盘弹出后重新定位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上方组件的高度值，用内联样式，动态负值。

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

解决了嘛？

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

有效

你好 ，怎么解决的？

回到顶部