[uniapp 小程序]textarea input 弹出键盘遮挡部分页面问题解决

怼烎@ 2023-06-24 04:53 583阅读 0赞

## 背景 ##

uniapp聊天中弹出键盘遮挡了输入框，如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]\#\# 解决方案  
天假参数cursor-spacing参数值代表距离输入框距离键盘的距离  
![在这里插入图片描述][20191220185635506.png]\#\# 修改后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191220170517646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ==,size_16,color_FFFFFF,t_70
[20191220185635506.png]: https://img-blog.csdnimg.cn/20191220185635506.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191220185745965.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，583人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 小程序textarea显示不正常问题

extarea这个原生组件的坑，placeholder位置错乱，穿透弹窗或遮罩层，ios上输入法弹起后换行输入内容遮挡，删除输入内容时内容被遮挡等等。。。解决页面滚动...

￡神魔★判官ぃ/ 2024年04月19日 12:15/ 0 赞/ 80 阅读

相关 [uniapp 小程序]textarea input 弹出键盘遮挡部分页面问题解决

背景 uniapp聊天中弹出键盘遮挡了输入框，如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

怼烎@/ 2023年06月24日 04:53/ 0 赞/ 584 阅读

相关处理软键盘弹出问题

let isReset = false; document.body.addEventListener('focusin', () => {

冷不防/ 2023年01月16日 11:17/ 0 赞/ 166 阅读

相关 uniapp textarea 输入框被遮挡问题

问题图片： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

布满荆棘的人生/ 2023年01月11日 15:28/ 0 赞/ 368 阅读

相关小程序弹出层禁止页面滚动

解决办法：在弹出层上添加 catchtouchmove=’true’ <view class="sh_Model_box" catchtouchmove='tr

古城微笑少年丶/ 2022年11月25日 10:26/ 0 赞/ 176 阅读

相关解决input获取焦点，弹出输入法之后，input被遮挡的问题

关于`input`输入框`fixed`在窗口底部的时候，`input`获取焦点，弹出输入法，`input`会被输入法遮挡，导致输入内容不方便。我们可以用`scrollInt

太过爱你忘了你带给我的痛/ 2022年05月22日 02:10/ 0 赞/ 252 阅读

相关禁止操作textarea区域，解决textarea中误点弹出虚拟键盘的问题

开发时遇到的问题，有时会用到，特此记录在HTML中有2个属性是控制textarea是否可输入 disabled 属性：该属性规定禁用文本区。被禁用的文本区既不可用，也

Love The Way You Lie/ 2022年03月19日 03:18/ 0 赞/ 339 阅读

相关小程序input输入框键盘弹出使得布局上移问题

注意点： 1.style='bottom:\{ \{inputBottom\}\}px'单位用px 2.input的 adjust-position='\{ \{false

- 日理万妓/ 2022年02月13日 18:51/ 0 赞/ 597 阅读

相关微信小程序 - input、textarea层级穿透问题

前言当页面中有`input`、`textarea`时底部提交按钮`position：fiexd;`悬浮时在滑动页面，`input`

男娘i/ 2021年09月30日 04:00/ 0 赞/ 655 阅读

相关 unaipp textarea键盘抬起遮挡问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

深碍√TFBOYSˉ_/ 2021年07月25日 16:16/ 0 赞/ 417 阅读