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无论怎么设置,都没有用。
我也遇到了类似问题,我的解决方法是:不自动上推页面,键盘弹出后重新定位textarea布局。通过绑定focus和blur事件,动态设置其高度。
首先不自动上推页面,adjust-position='{{false}}'
获取当前窗口TotalHeight,获取弹出的键盘高度keyBordHeight。此时可视区域高度VisualHeight = TotalHeight - keyBordHeight
在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
:
-400
rpx;
}
如果高度已知,可以通过加class来设置负值margin。如果高度未知,通过js获取textarea上方组件的高度值,用内联样式,动态负值。
show-confirm-bar="{{false}}"
有效
几年过去了,这个问题还是没解决. textarea如果在底部,输入法完全给挡住.
解决了嘛?
你好 ,怎么解决的?
请问解决了吗?
麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题
wechatide://minicode/loYaALmX7Io1