textarea在ios设备上不能输入的解决办法

最新推荐文章于 2024-08-09 15:35:53 发布

nn_nana

最新推荐文章于 2024-08-09 15:35:53 发布

阅读量6.9k

点赞数 1

本文链接：https://blog.csdn.net/nn_nana/article/details/55199724

版权

混合开发中遇到的问题，textarea在安卓设备点击可以弹出键盘，正常输入，但是在ios中就不可以；

改的代码如下；

加了contenteditable="true"这个，貌似就可以了；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

nn_nana

关注关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

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

sunshime的博客

07-19

2419

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

微信小程序从入坑到放弃二十三：都0202年了，textarea在ios上的bug咋还未修复呢？

yilingsj的博客

06-20

674

摘要： 2018年的时候，艺灵接单时搞过微信小程序。当时在写地址页时碰到了一个bug，主要是针对ios设备的。即：textarea有最小的padding且不可被设置。当时的解决方法是利用wx.getSystemInfo这个API获取设备信息，然后做进一步的兼容处理… 大纲一、光阴似箭，日月如梭二、复现bug2.1、发现不同2.2、精准误差2.3、常规的解决方案三、不服？代码测到你服为止！3.1、padding大法3.2、text-indent大法四、解决方案4.1、统一padding4.2、line-h.

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

遇到textarea标签不兼容ios，会出现在ios端不能输入

helloworldbey的博客

01-03

3242

在开发中首次碰到了textarea标签在ios手机，不能输入和操作，在百度上搜了一下，在ios端该标签可能默认设置-webkit-select-user为none，所以需要在该标签的class中将-webkit-select-user设置为auto，另外还是不保险的话就在textarea标签中添加属性contenteditable="true"，这是强制可编辑属性，就算是div设置了该属性都能进行...

微信小程序+uni-app使用textarea相关问题记录及部分解决方案

最新发布

m0_55464684的博客

08-09

388

微信小程序+uni-app使用textarea目前存在的相关问题记录，包括textarea组件设置font-size后linechange事件异常，设置letter-spacing不起作用，动态cursor设置无效，已focus后无法获取组件光标的位置，textarea输入框的光标颜色无法修改

IOS系统 input / textarea无法输入文字

zxh1101188677的博客

03-18

607

IOS系统 input / textarea无法输入文字问题原因出现这样的问题，大多因为页面中下面的css样式： *{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; use

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

i929479824的博客

06-11

3017

尝试了很多方法.只有下面的方法有用.可以试一下. 在标签里添加: style="-webkit-user-select:text !important"

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

明天也要努力的博客

05-07

5026

问题： input 输入框在 Android 系统可以输入和点击，但是在 iOS 系统上 input 输入框无法点击和输入。

Textarea输入字数限制实例(兼容iOS&安卓)

08-30

在本例中，开发者遇到了一个问题，即在iOS设备上，使用`onkeyup`事件无法正确限制输入字符数。这是因为`onkeyup`事件在某些情况下可能不会触发，特别是在用户使用物理键盘或者虚拟键盘的删除键时。为了解决这个问题...

react-native 解决ios中部分版本不能输入中文

01-04

通过上述步骤，可以在一定程度上解决React Native应用中iOS设备无法输入中文的问题。需要注意的是，虽然本方案有效解决了文中提到的具体问题，但实际开发中还需要根据具体情况调整策略。对于更复杂的情况，可能还...

html5+CSS 实现禁止IOS长按复制粘贴功能

08-31

在移动应用开发中，特别是在iOS平台上，用户长按操作通常会触发系统默认的复制和粘贴功能。然而，有时候开发者需要自定义长按事件来执行特定的功能，这就需要禁用系统的这一默认行为。本文将详细介绍如何通过HTML5和...

不能换行俄语前端h5_H5兼容问题及解决方法

weixin_39940901的博客

12-20

348

移动端如何定义字体font-family@ --------------------------------------中文字体的英文名称@ 宋体 SimSun@ 黑体 SimHei@ 微信雅黑 Microsoft Yahei@ 微软正黑体 Microsoft JhengHei@ 新宋体 NSimSun@ 新细明体 MingLiU@ 细明体 MingLiU@ ...

textarea在ios上失效

weixin_33736649的博客

10-17

1726

今天做项目时，h5页面上的有一个textarea输入框，在ios上发现不能输入了查看了一下问题发现是因为在公共样式代码中写了如下代码这个代码是防止用户长按粘贴的加上这个就会影响ios的input 和textarea -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ ...

textarea ios设备回显无显示问题

WalkOn_The_Road_的博客

11-12

1589

textarea ios设备回显无显示问题回显的内容有html标签所以我用的vue v-html解析html代码回显的内容有html标签所以我用的vue v-html解析html代码此时安卓手机可以正常回显，ios设备回显不了 #解决方法：步骤一、v-html 换成 :value 步骤二、提前将HTML标签替换掉 ...

微信小程序从入坑到放弃之坑八：textarea在苹果手机中的大Bug

weixin_33699914的博客

11-21

2860

首次在这里写点东西，还请各位大佬担待点。摘要：昨天的placeholder-class只是希望各位看官注意，而今天的textarea就绝对是一个超级大坑！而且如果看官手中没有苹果手机测试的话，这个可就真的是个坑了！为啥？难道要等到用户向你反馈你们产品有bug？？？......上一篇的《微信小程序从入坑到放弃之坑七：input组件的占位符...

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

iVRJay的博客

07-19

6317

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

uniapp ios键盘弹出会把底部fixed定位的textarea输入框覆盖掉的解决方法

weixin_44708030的博客

12-13

1773

将pages.json文件在指定的页面中加入以下配置 “softinputMode”: “adjustResize”这样就基本大功告成了，快去试试体验体验吧，哈哈哈哈哈哈哈哈哈。具体代码如下，将container的高度设置为100vh。

微信小程序textarea文本穿透弹窗解决

“明明很开心”的博客空间

06-12

2125

问题现象在小程序项目开发中，页面是个表单内容，其中包含有textarea组件。同时页面有弹出框出现textarea文本穿透到弹窗的问题。在ios中不会出现这种问题，而在安卓机会出现。按原本开发想法是textarea组件层级高于弹窗，于是使用z-index进行层级调节。但是发现并没有预料中的解决问题。分析看小程序官方文档发现textarea是原生组件，原生组件的覆盖就会想到cover-view，但是查看文档发现cover-view只支持嵌套一下几个，如图: 猜测它也许是个微信小程序的bug，很快就在社

vue爬坑记录：ios系统下，触摸input框以及textarea框无法唤起输入法

Mirage

05-03

3204

第一次触摸基本可以正常弹出输入框，然而第二次往后，就非常不好使。这是ios升级11.3以后fastclick的问题，解决方案：当前fastclick版本：1.0.6 找到fastclick.js源码，316行，加入如下一行代码： ...

uniapp textarea输入时被挡住 ios

08-08

在使用uniapp开发ios应用时，当我们在textarea输入内容时，有时会出现被输入法键盘挡住的情况。这个问题是由于ios对于输入框的默认处理机制所引起的。为了解决这个问题，我们可以采取以下几种方案来避免textarea被挡住的情况。 1. 使用scroll-view来承载textarea组件，通过设置scroll-view的属性使其能够嵌套textarea，并且在键盘弹出时自动滚动，保证textarea永远在可视区域内。具体代码如下： ```html <scroll-view scroll-y :scroll-with-animation="true" :style="'height: ' + scrollHeight + 'px'" @scroll="onScroll"> <textarea v-model="content" :style="'height: ' + textareaHeight + 'px;'" @focus="onFocus"></textarea> </scroll-view> ``` ```javascript data() { return { scrollHeight: 0, textareaHeight: 0 } }, methods: { onScroll(event) { this.scrollHeight = event.detail.scrollHeight; }, onFocus() { this.textareaHeight = '300'; // 设置一个合适的高度 } } ``` 2. 使用native组件来替代textarea组件，在ios平台上使用原生的输入框来实现输入功能。这样可以避免ios的输入框默认处理机制，从而不会出现被挡住的情况。具体代码如下： ```html <native-input type="text" @input="onInput"></native-input> ``` ```javascript onInput(event) { this.content = event.detail.value; } ``` 3. 修改iOS的输入框样式和位置，使其不会挡住textarea。我们可以通过设置css样式来实现。具体代码如下： ```html <textarea style="position: fixed; bottom: 0; width: 100%;" v-model="content" @focus="onFocus"></textarea> ``` ```javascript onFocus() { document.documentElement.scrollTop = document.documentElement.scrollHeight; } ``` 以上是三种解决uniapp在iOS平台上textarea被挡住的方法，根据具体项目需求选择合适的方案来解决这个问题。