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

农夫三拳有点疼=-=

已于 2022-11-23 10:08:39 修改

阅读量1.3k

点赞数

文章标签： uni-app vue.js 前端

于 2022-11-22 10:24:56 首次发布

本文链接：https://blog.csdn.net/m0_64207574/article/details/127977708

版权

网址：https://opendocs.alipay.com/mini/component/input

给对应的textarea或者inpout的输入框加个属性

:enableNative="false"。设置为true或者false看下，就能搞定

<textarea v-model="remark" class="textarea" placeholder="请输入其他信息" maxlength="30" :enableNative="false" @input="remarkSpaceFilter"></textarea>

注意点：uniapp的表单标签

input标签，切记，不要使用number类型或者data类型，无用。。。，用text类型，然后在加一个正则匹配来进行

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

农夫三拳有点疼=-=

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制

高级前端工程师

03-07

3547

uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办

input输入后页面顶上去了 ios_在iOS设备下，h5的input框失焦后页面被顶起来一部分bug解决...

weixin_29018815的博客

01-27

1221

在iOS12之后，h5的input框失焦后页面会出现被顶上去一部分的bug,下面就来看下怎么解决这个bug，首先我们必须知道这两个方法focusin(软键盘弹起事件)、focusout(软键盘关闭事件)。注意：这里的input框的位置是在页面的底部废话不多说，直接上代码//解决iOS软键盘弹起把页面顶起来一部分的bugvar u = navigator.userAgent;var flag;var...

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

解决 - 解决ios input 和textarea不能输入的问题

sunshime的博客

07-19

2417

写移动端项目总有一些兼容性需要我们解决滴，就比如我现在遇到的问题：ios 无法正常在input和textarea上面输入我们需要的内容，而安卓手机是可以正常输入的，一点问题都没有。那么我现在就给大家分享一下如何解决 ios 上面的问题啦。解决方法：直接在标签中加入style="-webkit-user-select:text !important" contenteditable="true" 这些代码即可。这里举个栗子： <textarea id="test" styl

解决uniapp，textarea拉起页面被顶起和键盘被输入框遮挡的问题。

热门推荐

weixin_44060609的博客

05-26

1万+

uni-app colorui组件总结一inputtextareatextarea组件在微信小程序属于原生组件处于最高级（苹果和开发工具上是正常的，安卓是一直显示在最上面）解决方法一 cover-view解决方法二亲测 input html <view class="cu-form-group "> <view class="title">姓名</view> <input placeholder="请输入姓名" type="text" :val

js手机键盘遮挡_移动端页面input输入框被键盘遮挡问题

weixin_33773996的博客

12-30

1386

提交vheader, footer, main {display: block;}header {position: fixed;height: 50px;left:;right:;top:;}footer {position: fixed;height: 34px;left:;right:;bottom:;}main {margin-top: 50px;margin-bottom: 34px;h...

解决 input 输入框在 iOS 系统中无法输入内容

m0_67401153的博客

05-16

1061

问题 input 输入框在 Android 系统可以输入和点击，但是在 iOS 系统上 input 输入框无法点击和输入。解决去掉下列样式 -webkit-touch-callout:none; -webkit-user-select:none; 或者这样写 *:not(input, textarea) { -webkit-touch-callout: none; -webkit-user-select: none; } 拓展关于 user-select 属性定义和用法 user-sel

uniapp - [全端兼容] 详细使用 emoji 表情包，在输入框中发送及显示 emoji 表情（全平台小程序/ H5 / App通用，类似微信聊天的小表情，支持文字与表情混合在一起，后端易存储）

王佳斌

07-23

6922

uniapp emoji，uniapp小程序h5网页安卓苹果端发送显示emoji表情，uniapp多端通用emoji表情库，uniapp怎么在输入框中选表情，uniapp实现表情包，uniapp如何实现input框输入emoji表情，uniapp表情插件库，uniapp聊天框输入emoji表情，uniapp显示emoji表情emoji微信表情，uniapp仿微信emoji表情包，uniapp表情符插件emoji表情符表情输入框 类似微信qq的表情，uniapp小程序中如何使用Emoji表情，uniapp仿

《uni-app》表单组件-Input组件

Oliver尹的博客

09-17

4589

input，输入框组件，表单届的扛把子，几乎所有的表单都离不开input，一个表单可以没有radio，可以没有checkbox，但是几乎不大可能没有输入框，它是表单组件中属于使用频率最高的一种，常见的业务场景包括登录时的用户名，密码以及注册时一大堆信息填写，只要是信息录入的功能第一选择基本都是输入框；

IOS输入框聚焦会把内容区域顶起

程序员超超的博客

11-20

917

我的最终解决思路是，既然聚焦会定顶起内容区域，那么顶起来多少，我就用空白的元素占位多少高度，这样内容就显示出来了。如果内容区域的高度大于了被顶起的高度（或者内容区域的高度多出了被顶起的高度20px之类的），那么就不需要占位了，因为这个时候肯定有内容区域的元素露出来了。本来初始情况会有默认的两条聊天记录，但是当点击底部的输入框时，输入框聚焦，弹起键盘，然后整个界面就被顶上去了，然后那两条默认的聊天记录也被顶上去了，导致整个页面没内容了。方法时需要一个特定的html结构的，需要这样的结构。

IOS上点击输入框后弹出键盘后，页面被顶上去，无法恢复问题。

weixin_45152159的博客

07-25

1735

ios中，键盘的弹起，页面会整个网上顶，键盘隐藏页面会下挪恢复原状，但是实际位置还是在被顶上去的地方，不会自动恢复。 <script> var u = navigator.userAgent, app = navigator.appVersion var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 $(...

IOS输入框，页面被顶上去不回弹

一条会流泪的鱼

06-11

992

做项目的时候，手动点击输入框，页面被顶上去不会回弹，该情况出现在ios中很频繁，据我之前的解决办法是这样的：解决办法一在页面中对输入框添加监听事件，失去焦点之后就对其触发一个回弹事件。 Vue.prototype.wInputBlur = function() { let currentPosition = '' let timer = '' let speed = 1 // 页面滚动距离

uniapp uview u-input ios手机点击不聚焦

lovewangyage的博客

11-14

1052

u-input ios手机点击不聚焦

input输入后页面顶上去了 ios_移动端开发时常见的ios和安卓的兼容性问题

weixin_39916360的博客

11-29

267

1.input聚焦，ios出现outline或阴影，安卓显示正常解决方法：input:focus{outline:none} input:{-webkit-appearance: none;}2. ios会将数字当成电话号码，导致变色解决方法：<meta name="format-detection" content="telephone=no"> <meta http-equi...

iphone6s textarea输入框获焦页面被顶起，失焦后页面没有恢复，焦点错乱问题

唱歌去旅行8的博客

04-09

485

iphone6s textarea输入框获焦页面被顶起，失焦后页面没有恢复，焦点错乱问题场景如下：点击分享微信朋友圈的时候，弹出pop框，里面有textarea可以输入文案，textarea获焦的时候，页面会被顶起，当textarea失焦的时候，复制和不复制按钮均不可点，分享文案处变成可点。错误原因：预估是页面没有滚动到原来位置引起，导致pop框的焦点错乱。解决方法：监听当textarea...

H5 嵌入在ios app中，input不能输入内容

思渝崖

05-26

636

vue中input框在ios app中不能正常输入

uniapp 弹出textarea输入框

06-06

在uni-app中可以使用uni.showModal()方法配合自定义组件的方式来实现弹出textarea输入框的效果。首先，创建一个自定义组件，例如命名为MyTextarea： ```vue <template> <view class="my-textarea"> <textarea v-model="content" :placeholder="placeholder"></textarea> </view> </template> <script> export default { props: { placeholder: { type: String, default: '请输入...' } }, data () { return { content: '' } } } </script> <style> .my-textarea { display: flex; justify-content: center; align-items: center; height: 100%; padding: 20rpx; } textarea { width: 100%; height: 100%; border: none; outline: none; resize: none; font-size: 32rpx; } </style> ``` 该组件包含一个textarea输入框和一个placeholder属性用于设置提示文本。然后，在需要弹出输入框的页面中，可以使用uni.showModal()方法来展示自定义组件MyTextarea： ```vue <template> <view class="container"> <button @click="showTextarea">弹出输入框</button> </view> </template> <script> import MyTextarea from '@/components/MyTextarea' export default { components: { MyTextarea }, methods: { showTextarea () { uni.showModal({ title: '请输入内容', content: '', showCancel: false, confirmText: '确定', cancelText: '取消', success: (res) => { if (res.confirm) { console.log(this.$refs.textarea.content) } }, fail: () => {}, complete: () => {}, maskClosable: false, customClass: '', component: this.$refs.textarea.$el // 弹出自定义组件MyTextarea }) } } } </script> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } button { padding: 20rpx; font-size: 32rpx; background-color: #4CAF50; color: #fff; border: none; outline: none; } </style> ``` 上面的代码中，当点击按钮时，会调用showTextarea方法，该方法使用uni.showModal()方法弹出一个模态框，并设置component属性为MyTextarea组件的实例，从而展示出输入框。最后，在MyTextarea组件中，可以使用v-model指令来绑定输入框的值，例如在一个方法中获取输入框的值： ```javascript console.log(this.$refs.textarea.content) ``` 其中，this.$refs.textarea指向组件MyTextarea的实例，content则是MyTextarea组件中绑定输入框的值。