个人案例
- 设计师灵感助手
为设计师创建的灵感分享工具。用作记录一闪而过的设计灵感,并与他人分享,当你收到别人的灵感分享时,可以一键收藏。
灵感日记(平面设计学习日记)扫码体验
我也遇到了类似问题,我的解决方法是:不自动上推页面,键盘弹出后重新定位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上方组件的高度值,用内联样式,动态负值。
textarea在页面底部时,调起键盘后textarea完全被遮挡!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无论怎么设置,都没有用。
2019-06-12