首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当multline设置为true时,IOS react本地onSelectionChange会将光标移动到初始位置

在React Native中,当TextInput组件的multiline属性设置为true时,可以实现多行文本输入。而在iOS平台上,当TextInput的multiline属性为true时,当用户选择文本并触发onSelectionChange事件时,光标会被移动到初始位置。

这是因为在iOS平台上,当TextInput的multiline属性为true时,iOS的文本输入框会使用UITextView来实现多行文本输入。而UITextView在选择文本并触发选择事件时,会将光标移动到初始位置。

解决这个问题的方法是使用TextInput的onSelectionChange事件的回调函数来记录光标的位置,并在需要时手动将光标移动到正确的位置。可以通过记录光标的位置和选中的文本范围,然后在onSelectionChange事件中重新设置光标的位置。

以下是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';
import { TextInput } from 'react-native';

const MyTextInput = () => {
  const [selection, setSelection] = useState({ start: 0, end: 0 });

  const handleSelectionChange = ({ nativeEvent: { selection } }) => {
    setSelection(selection);
  };

  const handleTextChange = (text) => {
    // 处理文本变化
  };

  return (
    <TextInput
      multiline={true}
      value="多行文本"
      selection={selection}
      onSelectionChange={handleSelectionChange}
      onChangeText={handleTextChange}
    />
  );
};

export default MyTextInput;

在上面的示例中,我们使用useState来保存光标的位置,然后在handleSelectionChange函数中更新光标的位置。在TextInput组件中,我们将selection属性设置为保存的光标位置,并在onSelectionChange事件中调用handleSelectionChange函数。

需要注意的是,这只是一个解决方案的示例,具体的实现可能会根据项目的需求和使用的库有所不同。

推荐的腾讯云相关产品:腾讯云移动直播(https://cloud.tencent.com/product/mlvb)可以用于实现音视频直播功能,适用于直播、在线教育、社交娱乐等场景。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动端Webapp中的那些Bug

IOS overflow: scroll 全屏滚动出界 1.1 出现场景 滑动到最顶部(最底部)的时候,停下,然后继续向上滑动(向下滑动) ?...1.2 解决方案 手动设置滑到边界的scrollTop(scrollFix) 快滑到上边界或者下边界的值,手动设置scrollTop与达到边界相差一像素(上边界:scrollTop = 1,...在其中的描述是:他的内容中有一输入框,然后focus,滑动内容光标不跟随移动,而在此输入的时候,光标又会回到输入框中。情况应该和我类似。...IOS输入框聚焦后页面整体上,头部顶出 4.1 出现场景 页面中有fixed头部,输入框,并且输入框靠下输入框focus的时候,会将整个页面上,导致头部被顶出去。...Android弹出的键盘遮住输入框 5.1 出现场景 输入框比较靠下,android上弹出键盘,会将输入框遮住。

3K50

H5页面前端开发常见的兼容性问题解决方法

IOS系统下输入框光标高度不正常 问题描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样,看起来很怪异。...例如下图,左图是正常所期待的输入框光标,右边是IOS的 input 光标。 解决办法:高度height和行高line-height内容用padding撑开。...IOS 端微信H5页面上下滑动卡顿和页面缺失 问题描述:在IOS端,上下滑动页面,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况。...IOS键盘唤起,键盘收起以后页面不归位 问题描述:输入内容,软键盘弹出,页面内容整体上,但是键盘收起,页面内容不下滑。 解决办法:在输入框失失去焦点的时候添加一个事件,让页面回滚。...使用vue router跳转到第二个页面后在分享,分享设置失败。如下图中的第二个分享就是有问题的,而第一个分享是正常的。 解决办法: 1.

2.8K10
  • 【H5】344- 微信 H5 页面兼容性解决方案

    1、ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 点击输入的时候,光标的高度和父盒子的高度一样。...例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。 ?...出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),点击输入的时候,光标的高度就自动和父盒子的高度一样了。...(谷歌浏览器的设计原则,还有一种可能就是没有内容的时候光标的高度等于input的line-height的值,有内容光标从input的顶端到文字的底部 解决办法:高度height和行高line-height...但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动 5、Vue中路由使用hash模式,开发微信H5页面分享在安卓上设置分享成功,但是ios的分享异常 问题详情描述: ios当前页面分享给好友

    2.7K30

    微信 H5 页面兼容性解决方案

    1、ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 点击输入的时候,光标的高度和父盒子的高度一样。...例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。 ?...出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),点击输入的时候,光标的高度就自动和父盒子的高度一样了。...(谷歌浏览器的设计原则,还有一种可能就是没有内容的时候光标的高度等于input的line-height的值,有内容光标从input的顶端到文字的底部 解决办法:高度height和行高line-height...但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动 5、Vue中路由使用hash模式,开发微信H5页面分享在安卓上设置分享成功,但是ios的分享异常 问题详情描述: ios当前页面分享给好友,

    3.3K30

    微信H5页面兼容性解决方案

    1、ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 点击输入的时候,光标的高度和父盒子的高度一样。...例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。 ?...出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),点击输入的时候,光标的高度就自动和父盒子的高度一样了。...(谷歌浏览器的设计原则,还有一种可能就是没有内容的时候光标的高度等于input的line-height的值,有内容光标从input的顶端到文字的底部 解决办法:高度height和行高line-height...但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动 5、Vue中路由使用hash模式,开发微信H5页面分享在安卓上设置分享成功,但是ios的分享异常 问题详情描述: ios当前页面分享给好友,点击进来是正常

    3.4K43

    【Flutter 专题】64 图解基本 TextField 文本输入框 (一)

    和尚尝试了光标的相关属性;cursorColor 光标颜色,cursorWidth 光标宽度,cursorRadius 光标圆角;其中 Radius 提供了 circle 圆角和 elliptical...textAlign 文字起始位置,可根据业务光标居左/居右/居中等;注意只是文字开始方向;textDirection 问文字内容方向,从左向右或从右向左; return TextField(style...maxLength 字符长度,设置默认是展示一行,且右下角有编辑长度与整体长度对比;与 maxLengthEnforced 配合,maxLengthEnforced true 达到最大字符长度后不可编辑...maxLines 允许展现的最大行数,在使用 maxLength 内容超过一行不会自动换行,因为默认 maxLines=1,此时设置 null 或固定展示行数即可自动换行;区别在于 null 会展示多行... TextField 获取焦点弹出输入框,输入框可能会将页面中元素顶上去,避免此情况,可将 Scaffold 中 resizeToAvoidBottomPadding: false 即可,resizeToAvoidBottomPadding

    4.7K51

    【移动端bug】iOS 下 Input 和 fixed 的问题

    ,迟早的问题而已,这种兼容性问题真的是很烦人的,文章很长,看是不可能看的了,所以收藏备用吧 本次文章主要描述两个问题 1、IOS11 下,键盘弹起导致的光标错位 2、IOS13 下,键盘弹起再收起导致的...2探索一下原因 正如我上面说,只有在定位元素的输入框被激活,页面仍有很多内容,仍能往上滚的时候,才出现光标错位的问题 那么 首先,观察一哈这个光标错位位置 好像是键盘没有唤起,定位元素输入框的位置啊...然后我们还需要明确一个事情,就是 激活定位元素的输入框,页面没有内容了,无法往上滚的时候 那么是不会出现光标错位的问题的,像下面这样 ?...4为什么会这样 究其原因,其实是 iOS 系统的bug,后续的系统已经修复了 5解决方法 虽然是系统bug,但是我们要照顾这部分人群,总不能让人换手机,只能自己解决了 先想想,页面滚动到底部,激活定位元素的输入框...(0) 直接滚动到顶,从而复位但是这样带来的问题就是体验不好,用户丢失了浏览高度 所以打算是 1、在输入框激活,保存页面浏览的高度 2、输入框失焦,获取保存的浏览高度,然后滚动到相应的位置 3、输入框失焦聚焦要进行防抖处理

    4.6K61

    VCL组件之编辑控件「建议收藏」

    TEdit对象从TCustomEdit对象继承而来,继承关系如下: CustomEdit对象的主要属性 AutoSelect —— 输入焦点近编辑框,框内的文字自动全选 AutoSize...—— True,编辑框的高度会自动适应输入文本字体的高度(必须要BorderStyle属性bsSingle才有效) CanUndo —— 编辑框内的文字修改能否通过undo方法来撤销 CharCase...—— 设置编辑框内字母的大小写,取值ecNormal不理会大小写,ecUpperCase全部大写,ecLowerCase全部小写 HideSelection —— 该属性False,即使输入焦点离开了该编辑框...类似的,如果WantTabs属性True,用户按下Tab键将使光标在编辑器中移动一个制表位,而不是使输入焦点在窗体的窗口控件上切换。...而该属性False,要使光标移动一个制表位,必须使用组合键“Ctrl + Tab”。 4、RichEdit组件 RichEdit对象位于Win32组件面板上。

    2K20

    记录工作中遇到的各种问题(Bug,总结,记录)

    页面使用Angular.js(1),页面中iframe中初始设置src属性的话,会导致页面重新加载一次 例如设置一个初始值,某些操作之后再更改src <iframe src="#" class="export-iframe...可编辑的元素,即<em>设置</em>了contenteditable<em>为</em><em>true</em>的元素是可编辑的,它有个<em>光标</em>的坑 <em>当</em><em>设置</em>元素的内容innerHTML改变<em>时</em>,原先的<em>光标</em><em>位置</em>会直接 跑到前面,这个不好解决 跟<em>光标</em>相关的还有选中<em>位置</em>的值的处理...如果不是一定要记住暂停之后的状态<em>位置</em>,再次播放<em>时</em>从头开始的话,可以直接暂停的时候<em>设置</em>animation<em>为</em>none即可 -webkit-animation: none; animation:...<em>设置</em>picker的选择文件按钮后,时常点击无效(并不是重复选择文件、按钮<em>初始</em>被隐藏的无效)。...<em>React</em>只对内部的DOM树及状态负责,外部插件修改之后(比如将某个节点拖<em>动到</em>另一个节点),再更新state来重新渲染,就会出问题 71. 待续

    18.1K12

    Linux命令-系统管理2.vim编辑器3.vim基础操作4.安装ssh5.使用ssh连接服务器

    1.查看当前日历:cal cal命令用于查看当前日历,-y显示整年日历: 2.显示或设置时间:date 设置时间格式(需要管理员权限): date [MMDDhhmm[[CC]YY][.ss]]...3.命令行模式 任何时候,不管用户处于何种模式,只要按一下ESC键,即可使Vi进入命令模式;我们在shell环境(提示符$)下输入启动Vi命令,进入编辑器,也是处于该模式下。...: ESC:从插入模式或末行模式进入命令模式 移动光标: h:左移 j:下移 k:上 l:右移 M:光标动到中间行 L:光标动到屏幕最后一行行首 G:移动到指定行,行号-G w:向后一次移动一个字...b:向前一次移动一个字 {:按段移动,上 }:按段移动,下移 Ctr-d:向下翻半屏 Ctr-u:向上翻半屏 Ctr-f:向下翻一屏 Ctr-b:向上翻一屏 gg:光标移动文件开头 G:光标动到文件末尾...,不包含光标所在字符 dw:删除光标开始位置的字,包含光标所在字符 撤销命令: u:一步一步撤销 Ctr-r:反撤销 重复命令: .

    1.1K20

    react native简单入门

    在展示图片前,最好判断XXX是否存在 source={require("XXX")} 加载本地图片,XXX本地图片相对地址 应该封装一个Image组件,用来处理onError的错误和网络图片缓存 TouchableOpacity...如果要想使其看起来和iOS上尽量一致,则需要设置padding: 0,同时设置underlineColorAndroid="transparent"来去掉底边框 placeholder placeholderTextColor...Modal ScrollView horizontal 当此属性true的时候,所有的子视图会在水平方向上排成一行,而不是默认的在垂直方向上排成一列。默认值false。...showsHorizontalScrollIndicator 当此属性true的时候,显示一个水平方向的滚动条。...FlatList data 数据 renderItem 每一项的渲染组件 onEndReached 列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用 onEndReachedThreshold

    3.6K10

    flutter 输入框组件TextField的实现代码

    TextField 顾名思义文本输入框,类似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是用户提供输入文本提供方便。...false, ), void _textFieldChanged(String str) { print(str); } 我们增加一个keyboardType属性,把keyboardType设置...我们给上面的代码新增decoration属性,设置相关属性,可以发现当我们的TextField获得焦点,图标会自动变色,提示文字会自动上。 ? 还可以看到 我加了一个onChanged。...输入框获取焦点/输入框有内容 会移动到左上角,否则在输入框内,labelTex的位置. suffixIcon: 输入框内侧右面的图标. icon : 输入框左侧添加个图标 在多个输入框内切换焦点 介绍一下...通过设置maxLength属性,将强制执行最大长度,并且默认情况下会将计数器添加到TextField。 github源码 以上就是本文的全部内容,希望对大家的学习有所帮助。

    4.8K11

    iOS微信浏览器input聚焦导致页面上,不能恢复的解决方法

    最近开发的一个项目中有一个获取验证码功能,在测试遇到了问题。 ? H5页面在iOS系统微信浏览器中,input focus 聚焦页面会被上推,导致页面整体上。...最后发现是因为 iOS 中 input 聚焦时会导致页面上,失焦后页面不能恢复,但是 input 会恢复之前的位置(或者说下移)。...要解决这个问题,需要在 input 失焦时调整页面的位置,使其恢复正常的位置。...解决办法: 比较简单的思路, input 失焦,页面滚动到顶部(以 jQuery 例): $('input').on('blur',function(){     window.scroll(0,0...setTimeout(function () {         window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重点  =======键盘收起的时候让页面回到原始位置

    3.3K10

    【JS】310- 使用 focusout 事件,解决 iOS 键盘收起不归位问题

    iOS 上键盘收起界面无法归位的问题。...当用户在手机上输入联系电话,IPhone键盘会弹出,此时iphone上为了让用户可以看到电话输入框,会将整个页面整体向上移动(不然键盘会遮住电话输入框)。...键盘收起页面无法还原归位 然而当用户输入完成关闭键盘后,键盘虽然收起了,但页面位置却不会还原。 问题分析: 实际上这是由于 iOS 无法在键盘收起,页面滚出视口的部分没有掉下来导致的。...要解决这个问题,我们可以在用户光标离开输入框的时候,调用 window.scrollTo(0, 0) 来把页面滚动到跟视口顶部对齐,从而实现页面归位的效果。...即将页面滚动到视窗顶部对齐 console.log('设置timer') this.timer = setTimeout(() => {

    3.4K10

    ReactPortals传送门

    React Portals可以翻译为传送门,从字面意思上就可以理解我们可以通过这个方法将我们的React组件传送到任意指定的位置,可以将组件的输出渲染到DOM树中的任意位置,而不仅仅是组件所在的...MouseOut: 当鼠标光标离开一个元素触发,该事件在鼠标从元素内部离开触发,并且会冒泡到父元素。...a上,会执行a元素绑定的事件,依次将鼠标移动到a、b、c的时候,同样会以此执行a、b、c的事件绑定函数,并且不会因为冒泡事件导致父元素事件的触发,当我们鼠标直接移动到c的时候,可以看到依旧是按照a、...React以控制Portal节点及其生命周期: Portal未脱离React组件树,通过Portal渲染子组件React仍然可以控制组件的生命周期。...设置true然后显示出portal,那么此时重点来了,我们这里实际上会有一个delay的延时,也就是说实际上当我们移出元素,在delay时间之后才会将元素真正的隐藏,那么如果此时我们将鼠标再移入到portal

    25150

    linux基础

    /lost+fount:系统异常产生错误时,会将一些遗失的片段放置于此目录下。...命令行模式 任何时候,不管用户处于何种模式,只要按一下ESC键,即可使Vi进入命令模式;我们在shell环境(提示符$)下输入启动Vi命令,进入编辑器,也是处于该模式下。...O: 向上新开一行,插入行首 2.进入命令模式 ESC 从插入模式或末行模式进入命令模式 3.移动光标 h: 左移 j: 下移 k: 上 l: 右移 M: 光标动到中间行 L...: 光标动到屏幕最后一行行首 G: 移动到指定行,行号 -G w: 向后一次移动一个字 b: 向前一次移动一个字 {: 按段移动,上 }: 按段移动,下移 Ctr-d: 向下翻半屏...Ctr-u: 向上翻半屏 Ctr-f: 向下翻一屏 Ctr-b: 向上翻一屏 gg: 光标移动文件开头 G: 光标动到文件末尾 4.删除 x: 删除光标后一个字符,相当于 Del

    2K50

    React Native面试知识点

    本文会不定期不断更新,想查看最新版本请移步至https://github.com/forrest23/react-native-interview ---- 1.React Native相对于原生的ios...调用 setState React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。 这将启动一个称为和解(reconciliation)的过程。...一旦有了这个树,为了弄清 UI 如何响应新的状态而改变,React 会将这个新树与上一个元素树相比较( diff )。...2.都能由自身组件的相应初始化函数设定初始值。...在编写业务逻辑的时候,我们会有许多个js文件,打包的时候RN会将这些个js文件打包成一个叫index.android.bundle(ios的是index.ios.bundle)的文件,所有的js代码(包括

    2.9K11
    领券