uniapp 开发ios，使用textarea，在键盘弹起之后，除了textarea内容可以滚动之外，页面禁止滚动。

最新推荐文章于 2024-08-04 15:47:44 发布

weixin_42613517

最新推荐文章于 2024-08-04 15:47:44 发布

阅读量1.2k

点赞数 3

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/weixin_42613517/article/details/131191708

版权

实现步骤

1.禁止最外成盒子的滚动，可以使用touch-action： none；

2.在textarea外层盒子将touch-action设置成 auto或者pan-y。

但是当textarea滚动条锁定的时候，最外成盒子也能滚动了。

可以尝试一下下面这个方案:

创建两个内容一样的盒子，一个在键盘弹起的时候显示，一个在键盘未弹起的时候显示。

键盘弹起的时候，使用touchmove.prevent 去阻止最外层盒子的滚动事件，然后需要滚动的地方包一个scroll-view，就可以实现比较完美的效果了，如下图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_42613517

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
uniapp 开发ios，使用textarea，在键盘弹起之后，除了textarea内容可以滚动之外，页面禁止滚动。

ios 键盘弹起禁止除了textarea之外的区域禁止滚动
复制链接

扫一扫

uniapp 小程序怎么隐藏键盘_解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移问题...

weixin_29602351的博客

01-30

1762

存在问题做了一个记录页面(类似单方聊天页)，输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见需要实现效果：比如一个记录页面，需要在键盘弹出时：底部的输入框跟随键盘上弹页面头固定在顶部不动聊天信息区域(即内容区)调整高度，该区域局部滚动解决方法底部输入框fixed定位在底部，使用输入框的@focus获取键盘高度，更改输入框bottom；@blur时恢复bottom=0；使用包含页面头和...

如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

11-21

总的来说，通过结合CSS和JavaScript，我们可以使`<pre>` 元素在保留格式的同时自动换行，以及让`<textarea>` 的高度自适应其内容。这不仅可以提升用户体验，也有助于保持页面布局的整洁。请注意，如果在实际项目中...

1 条评论您还未登录，请先登录后发表或查看评论

uniapp中组件库的Textarea 文本域的丰富使用方法

精通前端技术，了解后端接口

01-03

2795

文本域此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等注意：由于在nvue下，u-textarea名称被uni-app官方占用，在nvue页面中请使用名称，在vue页面中使用或者u-textarea均可。

uniapp使用 input弹出键盘问题

baidu_37302589的博客

06-06

1142

解决uniapp input弹出键盘问题

uniapp input或textarea键盘弹起页面上移

weixin_44350315的博客

11-21

1650

解决uni-app微信小程序input输入框在底部时，键盘弹起页面整体上移问题，设置adjust-position="false"不生效

uniapp ios软键盘弹起跳转页面，返回后留白问题

qq_38026437的博客

07-03

1078

项目中碰到一个奇怪的问题，uniapp 中 ios软键盘弹起的状态下跳转页面，然后在子页面关闭软键盘，再返回上一页，会导致页面留白的问题。因为页面是nvue写的，所以不确定vue会不会出现相同的情况，因为不是页面向上推，所以设置页面滚动也没有效果然后也不知道怎么恢复留白问题。所以只能在跳转页面之前关闭一下软件盘，这也只是临时方案，如果有更好的方法，请指教，谢谢。 try{ uni.hideKeyboard() }catch(e){ //TODO handle the excep.

项目场景：uniapp多个输入框弹出软键盘后无法滚动到底部

mtl1994的博客

05-01

2189

解决uniapp 输入框多了以后无法拉到最底部 android

uniapp的input或者textarea再苹果机上面输入框被顶到上面，不在对应位置方法

m0_64207574的博客

11-22

1246

uniapp的input或者textarea再苹果机上面输入框被顶到上面，不在对应位置方法

uniapp 苹果手机input,textarea聚焦后页面被上推，失去焦点后未还原问题

iVRJay的博客

07-19

6246

应用场景：自定义封装了一个弹层，使用position:fixed,弹层内有input和textarea，这种组合会导致在苹果手机上出现一个问题：问题描述：当input和textarea获取焦点后，整个页面会被上推一段距离，输入完成后，在失去焦点的时候，页面未被还原，导致弹层实际可操作区域与显示区域错位，错位的上下距离就是页面被上推的距离；解决办法：先给input、textar...

uniapp让ios软键盘-点击-非输入框地方-自动收起

weixin_38304202的博客

12-05

3059

在pages.json里要使用这个特性的页面上style配置: "style" : { "app-plus": { "softinputNavBar": "none" } } 如果需要js动态设置的话： this.$mp.page.$getAppWebview().setStyle({ ...

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

RubyLinT的博客

09-18

6255

textarea这个原生组件的坑，placeholder位置错乱，穿透弹窗或遮罩层，ios上输入法弹起后换行输入内容遮挡，删除输入内容时内容被遮挡等等。。。解决页面滚动时placeholder/输入内容不随textarea组件滚动，经多方尝试，出现这种情况是textarea的某个父级元素设置了overflow属性，去掉所有父级元素的overflow属性即可解决解决textarea组件为原生...

iOS项目开发键盘弹出遮挡输入框问题解决方案

01-05

UITextField和UITextView，前者是单行输入文本框，后者是可滑动的多行输入文本框，在这整个开发过程中，我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息，此外，我们还需要保证在键盘弹起的时候不...

textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法

12-13

要去掉`textarea`的滚动条，可以分别使用`overflow-x`和`overflow-y`属性来控制横向和纵向的滚动条。例如，如果你想要隐藏`textarea`的横向滚动条，可以这样设置： ```html <textarea id="txtComments" style=...

html滚动条 textarea属性设置

12-14

1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。...

如何在uniapp上隐藏默认导航栏

最新发布

bjjgff的博客

08-04

145

我们可以在package.json当中的 tabBar加"custom": true。当要定义导航栏，使用uni.switchTab来跳转页面时，需要将默认的导航栏进行隐藏。比如使用 uni.hideTabBar();去隐藏的话，可能会有闪现出现的可能性。

uniapp页面里面的登录注册模板

码农在写代码

08-02

729

uniapp里面的登录注册页面模板

使用uniapp+Django开发的在线工具网站

m0_63533079的博客

08-04

614

提供各种实用工具和服务，包括但不限于实用工具、查询工具、休闲娱乐工具、在线转换、在线游戏、在线加密等功能。用户可以通过Web浏览器、微信小程序或安卓访问和使用这些工具。通过此次项目，我不仅在技术上取得了显著的进步，还深刻体会到了UniApp和Django这两个框架在实际项目中的强大应用价值。它们为我提供了灵活的开发方式和高效的开发效率，使得我能够更专注于实现项目的核心功能。

前端Web-JavaScript(上)

Yu2uki的博客

07-31

1535

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

iphone 软键盘弹起，禁止页面整体往上滚动

06-08

可以通过监听软键盘弹起事件，然后设置页面的滚动方式来实现禁止页面整体往上滚动。具体实现可以参考以下代码： ``` // 监听软键盘弹起事件 window.addEventListener('resize', function() { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function() { if ('scrollIntoView' in document.activeElement) { document.activeElement.scrollIntoView(false); } else { document.activeElement.scrollIntoViewIfNeeded(false); } }, 0); } }); // 禁止页面整体往上滚动 document.body.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false }); ``` 这段代码中，我们使用了 `window.addEventListener()` 监听了软键盘弹起事件，在事件处理函数中使用了 `scrollIntoView()` 或 `scrollIntoViewIfNeeded()` 方法将当前输入框滚动到可视区域内。同时，我们也使用了 `document.body.addEventListener()` 监听了页面的 touchmove 事件，并在事件处理函数中使用了 `preventDefault()` 方法来阻止页面的默认滚动行为，从而实现了禁止页面整体往上滚动的效果。