酒浓码浓 - IOS滚动页面时，input光标跟着动

最新推荐文章于 2023-07-05 16:46:01 发布
最新推荐文章于 2023-07-05 16:46:01 发布
阅读量1.2k 收藏
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mx18519142864/article/details/100655625
版权

IOS滚动页面时，input光标跟着动

说白了input在手机上聚焦时触发foucs事件，会弹出输入法

当我们滑动页面时，input光标会跟着页面滑动，跑出input框外。

H5端可以监听俩个事件解决

一个是手机滑动的touchmove事件

一个是滚动条scroll事件

同时使用再让input触发blur失焦即可

酒浓码浓的博客
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
移动端ios输入框遇到的一些问题
weixin_45412615的博客
07-24 204
移动端ios输入框 日常开发中使用input固定定位在底部遇到的一些问题，话不多说上代码 ~~~~（大佬勿喷） 输入框收起时底部留白一大块 let scrollY = null; $('.animated').focus(function(){ scrollY = $(this).offset().top // 记录获取焦点时页面距离顶部的距离 }); $('.animated').blur(function(){ window.scroll(0, scrollY);
解决ios手机中input输入框光标过长的问题
08-27
通过修改line-height的值，我们可以看到iOS和Android手机input光标大小不一致的问题得到了解决。下面是修改前后的效果比较： | 手机类型 | 修改前 | 修改后 | | --- | --- | --- | | iOS | 光标大小过大 | 光标大小...
ios11，弹出层内的input框光标错位 键盘弹出时，输入信息，光标一直乱跳
weixin_30236595的博客
01-23 841
　　之前开发了一个微信项目，维护期中苹果手机突然出现光标错位现象，经过排查，发现是最新的ios11系统的锅。 　　具体情况：弹出层使用position: fixed；弹出层内附带input/textarea输入框，ios11系统的苹果机用户在点击输入框，出现键盘后，弹出层被顶上去，而光标还停留在原处，即出现错位情况。 　　解决思路： 解决光标错位：弹出层设置为posi...
input[type=“number“]鼠标滚动时值跟着改变
active_lm的博客
10-25 1785
input[type="number"]鼠标滚动时值跟着改变，需求是鼠标滚动时，不改变input值，只页面滚动
微信小程序|ios页面滚动时，input定位会错乱
qq_41555989的博客
01-06 2468
解决方法1（推荐）： 设置属性always-embed=true 解决方法2: 使用focus/blur事件手动控制input框focus
uni.pageScrollTo滚动时出现抖动问题
Syleapn的博客
06-02 8164
uni-app中，将页面滚动到顶部，有两种方式： 一、使用scroo-view标签中的@scrolltoupper实现 二：使用uni.pageScrollTo实现 近期在做视频类的一个重播功能，要求点击“重播”按钮后页面能够回到顶部（由于视频在页面的顶部，这样点击“重播”后不会跳到视频之外的其他地方），用uni.pageScrollTo来实现，但是发现三个问题： ...
ios 输入框光标下移列表也跟着上移动_微软全新远程桌面 iOS 版 10.1.3 发布
weixin_28951347的博客
12-31 82
IT之家8月19日消息 微软远程桌面 iOS 版现已迎来 10.1.3 更新。新版本中，微软远程桌面进行了一些 Bug 修复和功能更新。IT之家了解到，微软远程桌面输入模式在所有活动的电脑和远程应用连接中都是全局性的，而在 iPhone 或 iPad 上使用 SwiftPoint 鼠标时，输入模式自动切换到触摸模式。输入模式(鼠标指针或触摸模式)现在在所有活动的电脑和远程应用连接中都是全局性的。修...
iOS11.3以下modal中input光标错位的解决方法
08-26
iOS11.3以下modal中input光标错位的解决方法 iOS11.3以下modal中input光标错位的解决方法是指在iOS11.3以下的系统中，出现了input光标错位的问题，即在弹出层中输入框的光标位置不正确的问题。这个问题是由于iOS...
ios开发-iOS开发实用demo之滚动条开发.zip
最新发布
03-03
在iOS开发中，滚动条（ScrollIndicator）是用户界面不可或缺的一部分，尤其在长列表或大量内容展示时，它为用户提供了一种导航方式，了解当前浏览位置并进行上下滚动。本教程将深入探讨如何在iOS应用中实现滚动条...
ios-页面滚动菜单.zip
07-11
这个项目“ios-页面滚动菜单.zip”引用了一个名为“SegmentView”的开源库，它是由GitHub用户a270042126提供的。SegmentView是一个自定义的UI组件，它模仿了苹果iOS系统原生的SegmentControl，并在此基础上扩展了更...
Html5在ios上input标签自动填充内容移动光标至尾的方法
q408896553的博客
07-11 3330
在做ionic框架下开发webapp，遇到了input框无法对于自动填充的内容做到聚焦时将光标自动移到末尾。在调研学习后,发现了以下方法，希望给大家有所帮助：moveEnd: function(obj) { obj.focus(); var len = obj.value.length; if (document.selection) { var sel = o
input获取焦点页面自动滚动
wzzehui的博客
07-23 5316
微信下测试无问题 /*监听input状态，屏幕滚动到input，上下居中 *在安卓手机上屏幕尺寸变化会产生resize事件。所以监听resize事件。 *然后定位到input框。 */ window.addEventListener('resize', function () { if(document.activeElement.tagName === 'INPUT'){ ...
ios html5 input 聚焦,解决 H5 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG...
weixin_33545930的博客
06-21 820
=================转载===================================：网上方法大多就只有 window.scrollTo(0, 0) ，会造成 input 失去焦点时就滚动到顶部了，这是不对的，并不是所有情况都要回顶部，于是自己写了个适用全部场景的解决方案，并且添加后，所有页面生效~在全局的入口页面(例：App.vue)加以下代码：(/iphone|ipod...
记uniapp 自定义input 获得焦点键盘弹起时 input 输入框 跟随页面滚动问题
weixin_43073383的博客
11-22 2637
前言：最近在做im聊天，使用uniapp 的scroll-view 写list 使用scroll-into-view 做锚点滚动，需求是聊天时获得焦点，要和微信那样只滚动聊天记录，而不是使用input 的adjust-position 自动上推页面；使用uni.onKeyboardHeightChange监听键盘高度变化 ；用fiexd 定位input 的位置，但是在ios 运行，input 会莫名其妙的滚动页面，似乎还不是跟随scroll-view滚动，具体没有深入探究 解决此问题使用@touchmov
关于页面input导致页面可滑动问题（iOS上）
weixin_30430169的博客
04-13 2084
关于页面input导致页面可滑动问题（iOS上） 安卓关于弹出键盘问题可以用resize解决 解决方案：滑动页面的时候让对应的input失去焦点（默认滚动不失去焦点） 1.给input组件添加获取焦点事件，并传人对应input的参数 @onFocus="onFocus(0)" //input绑定获取焦点事件 2.追加事件 onFocus(val){ //获取焦点事件 this.isScro...
解决ios机型上输入框获取焦点页面回滚的问题
zqy123456789000的博客
07-05 352
在输入的时候 设置 滚动值 失去焦点的时候 设置 auto 即可。
解决 H5 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG
qq1014156094的博客
03-20 9779
网上方法大多就只有 window.scrollTo(0, 0) ，会造成 input 失去焦点时就滚动到顶部了，这是不对的，于是自己写了个适用大多场景的解决方案 这里用 Vue 为例： <template> <div ref="container"> <input type="text" @blur="onBlur"> &l...
ios输入框聚焦问题
m0_37728716的博客
01-06 2233
众所周知，ios下的网页有个特性——不允许JS自动获取input输入框的焦点并调出虚拟键盘，归根结底是聚焦事件的触发源头必须是用户，所以我们不管怎么模拟click再focus都是无效的。 这儿记录一下为什么用户点击了页面的按钮，input.focus()仍然无效，demo如下 <template> <div id="app"> <input type...
ios在用户输入点击输入按钮上的完成时页面滚动问题
青阳的博客
04-28 452
在失去焦点强制滚到某位置 document.body.addEventListener('focusout', function () { setTimeout(function(){ $('html,body').stop(true,true).animate({scrollTop:$(document).height()+'px'},0); },200) }); ...
vue-virtual-scroller ios 滚动回弹
07-27
你可以通过在 Vue Virtual Scroller 组件上使用 `scrollable` 属性来实现 iOS 滚动回弹效果。将该属性设置为 `true`，即可在 iOS 设备上启用回弹效果。下面是一个示例： ```html <template> <vue-virtual-scroller :scrollable="true"> <!-- 填充内容 --> </vue-virtual-scroller> </template> ``` 确保你已经正确安装了 Vue Virtual Scroller 组件，并按照上述示例配置了 `scrollable` 属性。这样就能在 iOS 设备上实现滚动回弹效果了。如果仍然没有效果，可能需要检查其他相关配置或依赖项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值