解决ios手机中input输入框光标过长的问题

最新推荐文章于 2021-01-11 17:08:03 发布
转载 最新推荐文章于 2021-01-11 17:08:03 发布 · 1.2k 阅读 · 1
文章标签：

#前端移动样式端兼容

本文介绍了解决iOS及Android设备上input输入框光标显示异常的方法，通过调整line-height属性，实现了光标大小的一致性显示。

解决ios手机中input输入框光标过长的问题

其实，只是调整了line-height的大小，就解决了iOS和Android手机input光标大小不一致的问题

准确修改

修改前：
.receiving-info .receiving-info-list input {
display: inline-block;
width: 70%;
font-size: 14px;
color: #333;
border: none;
outline: none;
line-height: 50px;
}
修改后：
.receiving-info .receiving-info-list input {
display: inline-block;
width: 70%;
font-size: 14px;
color: #333;
border: none;
outline: none;
line-height: 20px;
}

Android和iOS手机修改前后的效果：
在这里插入图片描述
在这里插入图片描述

微信小程序安卓系统下Input输入内容上移错位问题的解决办法
weixin_61769998的博客
01-18 2140
微信小程序安卓系统下Input输入内容上移错位问题的解决办法
iOS中input框问题
09-19
解决苹果手机中input输入框,在弹出软键盘之后,fixed定位失效的问题,是用css解决的
input在ios中光标过长问题
weixin_44968219的博客
01-11 254
操作当前input，设置上下padding .van-field__control { line-height: 0.46rem; padding: 0.25rem 0; }
解决input标签在IOS浏览器中光标过长的问题
summer_my_sunshine的博客
03-02 3499
不要给input加高度，加padding撑开就行了
ios下input的光标过高问题
qq_27667337的博客
05-07 591
父级写高度，input高度写 100%，不要写Line-height
解决ios h5 input输入框被输入法弹出一块区域的问题
08-27
解决ios h5 input输入框被输入法弹出一块区域的问题 一、问题背景 在ios系统中，使用h5开发的input输入框时，输入法弹出时，会出现输入框被弹出一块区域的问题。这是一个常见的问题，对于开发者来说，解决这个问题...
iOS11.3以下modal中input光标错位的解决方法
08-26
iOS11.3以下modal中input光标错位的解决方法是指在iOS11.3以下的系统中，出现了input光标错位的问题，即在弹出层中输入框的光标位置不正确的问题。这个问题是由于iOS系统的BUG所导致的，幸运的是，在iOS11.3以后，这...
iOS－－TextView自适应高度以及键盘遮挡问题
weixin_34096182的博客
01-25 417
制作一个textview，遵守协议，设置相关属性，这里是我做的例子 协议：UITextViewDelegate textview.backgroundColor=[UIColor whiteColor]; //背景色 textview.scrollEnabled = NO; //当文字超过视图的边框时是否允许滑动，默认为“YES” textview.delegate = self; ...
【小知识点】input输入框在安卓以及IOS手机中光标及字体不居中解决方法
weixin_33991418的博客
06-08 492
问题根本：不要使用line-height垂直居中。解决方法：可直接定义height，然后高度由上下padding值撑开。 input { height: 1rem; padding: 1rem 0; } 转载于:https://www.cnblogs.com/winteronlyme/p/6963653.html...
ios苹果手机中input输入框光标过长的问题
王小森的成长博客
03-23 6142
在制作表单列表的时候，为了增加可点击区域，我们经常会增加input的行高。如果采用下面的方式，在android系统中是没有问题的，但是在iOS系统中，输入光标会很高，影响视觉，（用line-height来设置input的高度） <input type="text" style="font-size: 24px;line-height: 40px;"> 解决上面的问题，我们可以用下面...
input输入框中的光标在ios上乱跳的问题
热门推荐
小圣贤君的博客
10-30 1万+
最近一个项目中碰到一个问题： 在一个页面中点击一个按钮会出现一个弹出框，这个弹出框给了fixed定位，并且宽高都等于100%，在这个弹出框中有包含input输入框的div,这个div未做定位设置。页面操作中看不出来什么问题，真机操作的时候会发现，安卓上没有问题，但是在ios上就出现问题了，尤其是ios11系统上，问题表现非常明显。在输入框输入内容的时候，手机下方会弹出一个键盘，然后输入框中光标就跟
移动端ios系统 input输入框光标过高 和颜色样式
weixin_42260396的博客
10-30 3105
h5移动开发过程中input标签在ios系统下默认行高为百分之百 所以全局更改一下行高即可 input{ line-height: 20px !important; } 如果想让输入框光标颜色和主题一样，全局添加以下代码即可 caret-color:#268af1; ...
ios11弹出层上input输入框光标移位问题
weixin_34290096的博客
03-13 1682
ios11弹出层上input输入框光标移位问题 需求是这样的，用户点击页面上的按钮弹出浮层，浮层上有两个输入框，分别输入用户名，手机号等信息，然后点击报名，浮层用的fixed定位。本来一切都好，但在真机上测试时...what???在ios11下，浮层上input框的光标乱的一塌糊涂。 于是上网查询得知ios11系统的苹果机用户在点击输入框，出现键盘后，弹出层被顶上去，而光标还停留在原处，即出现错位...
IOS11 弹窗上文本框光标错位问题
01-19 7110
无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。 最近遇到个蛋疼的问题，系统的移动端页面在IOS升级到11以后，页面上的弹窗中的文本框的光标会错位，进而导致下面的按钮也无法点击，具体解决方式就直接搬运同行的了，见下面链接 https://www.cnblogs.com/...
彻底解决IOS HTML页面上光标跳行、光标不跟随页面问题
qq_33571718的博客
12-05 6466
  继：修复IOS上滑动HTML界面光标乱跳 声明：这里只是说明一种处理方法 继上一篇文章，处理IOS滑动时，光标不跟随页面滚动，处理方法是，监听touchmove事件，获取当focus的元素，使之失去光标；但是这种方法并不能真正的解决问题，比如，你进入页面，并不滑动页面，而是去点击屏幕可见区域最底下的输入框时，问题就出来了，如图： 这里说一下，网络上大多说是IOS上fixed定位，修...
移动端vue ios系统（iphone手机）点击input后放大，界面拖动
吕小医的博客
09-20 3117
在APP.vue中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> 这个命令是页面缩放比例，也就是页面禁止缩放 i
uniapp小程序，部分 ios 真机测试出现 input 输入框输入数字 跳动 问题
最新发布
06-07
### uniapp iOS input 输入框数字跳动问题解决方案 在部分 iOS 真机测试中，uniapp 小程序的 `input` 输入框在输入数字时可能会出现跳动的问题。这种现象通常与输入框的渲染机制、双向绑定的延迟以及 iOS 系统特有的行为有关。以下是一些可能的解决方案，结合了相关引用内容和专业知识。 #### 1. 调整输入框样式以避免键盘闪烁 通过在密码输入框下方插入一个隐藏的 `input` 输入框，可以有效解决键盘闪烁问题。这种方法的核心思想是利用隐藏的输入框来干扰系统对键盘的默认行为[^1]。 ```html <input v-model="value" /> <input class="simulation" /> ``` ```css .simulation { height: 0; min-height: 0; overflow: hidden; } ``` 尽管该方法主要用于解决密码输入框的键盘闪烁问题，但也可以尝试将其应用于数字输入框，观察是否能缓解跳动现象。 #### 2. 删除 `enableNative` 属性并调整小程序配置 支付宝小程序中遇到的光标漂移问题可以通过删除 `enableNative` 属性并调整 `app.json` 文件中的配置来解决[^2]。类似地，在 uniapp 中，可以尝试以下步骤： - 确保没有在 `input` 组件中设置 `enableNative` 属性。 - 在 `manifest.json` 文件中，检查是否存在类似的配置选项，并根据需要进行调整。 #### 3. 解决连续输入时的光标闪动问题 根据引用[^3]，`uni-easyinput` 的源码中存在因连续触发事件导致的模型值同步延迟问题，这可能是引起输入框跳动的原因之一。以下是两种可能的解决方案： ##### 方案一：优化输入事件处理逻辑 通过减少不必要的同步操作，可以降低输入框跳动的可能性。例如，在自定义组件中，确保 `modelValue` 的更新频率适中，避免频繁触发重新渲染。 ##### 方案二：使用防抖或节流技术 对于连续输入的情况，可以引入防抖（debounce）或节流（throttle）技术，限制输入事件的触发频率。以下是一个简单的防抖函数实现示例： ```javascript function debounce(func, delay) { let timer; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); }; } // 在输入框中使用 <input @input="debounceHandler" /> export default { methods: { debounceHandler: debounce(function (event) { this.value = event.detail.value; }, 300) } }; ``` #### 4. 强制刷新输入框内容 如果输入框跳动是由于渲染不一致引起的，可以在每次输入后强制刷新输入框的内容。例如： ```javascript <input v-model="value" @input="refreshInput" /> export default { data() { return { value: '' }; }, methods: { refreshInput(event) { this.$nextTick(() => { this.value = event.detail.value; }); } } }; ``` #### 5. 检查 iOS 系统版本兼容性 某些 iOS 版本可能存在特定的渲染 bug，建议针对不同版本进行测试，并在必要时采用不同的解决方案。例如，iOS 16 的光标漂移问题可以通过调整小程序配置来解决[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值