[2023.09.25]:Rust编写基于web_sys的编辑器:输入光标再次定位的小结

news/2024/4/19 19:08:41/

前些天,写了探索Rust编写基于web_sys的WebAssembly编辑器:挑战输入光标定位的实践,经过后续的开发检验,我发现了一个问题,就是光标消失了。为了继续输入,用户需要再次使用鼠标点击。现在我已经弄清楚了导致这个问题的原因,即需要找到text node来设置光标。

先上代码

    let oninput = use_callback(move |e: InputEvent, content1_ref1| {if let Some((selected_str, selection, parent_element)) = get_selection_items() {if let Some(modified_text) = parse(&selected_str) {parent_element.set_inner_html(&modified_text); // 更新解析后的输入                    selection.remove_all_ranges().unwrap(); // 移除焦点let div = content1_ref1.cast::<HtmlDivElement>().unwrap(); div.focus();let first_child = parent_element.first_child().unwrap().first_child().unwrap(); // 这一行是关键let new_range = Range::new().unwrap();                    new_range.set_start(&first_child, 3); // 将光标设置到第3个字符的位置new_range.collapse();selection.add_range(&new_range);}}},(content1_ref.clone()),);

在上面的源代码中,我已经用注释标记了first_child,这里是关键,因为这里获取到的就是text node。为什么一定要text node呢?原因在于range.set_start的第一个参数,参考mozilla的文档:

If the startNode is a Node of type Text, Comment, or CDataSection, then startOffset is the number of characters from the start of startNode. For other Node types, startOffset is the number of child nodes between the start of the startNode.

即如果输入的参数是text node,那么上面的那个参数3就代表从开始到第3个字符的位置;如果是其它类型的node,就表示从开头到第3个字节点的位置。

那什么是text node呢?在web_sys中,它的类型引入就是web_sys::Text。可以用is_instance_of::<Text>()来判断:

if first_child.is_instance_of::<Text>() { ... }

在mozilla中,关于Text的解释如下:

The Text interface represents a text node in a DOM tree.

现在,我们清楚了,导致问题的原因是没有使用text node,以及在set_start方法中,如果node type不是text node,光标将如何定位。其实关于set_start的这段解释,我很早就看见了,但是由于对text node无感,就直接给忽略了。因此,才绕了这么大的一个圈子。
好了,这个小结就到这里,欢迎交流,可以想像,后面的路会更难走。


http://www.ppmy.cn/news/1129637.html

相关文章

【蓝桥杯选拔赛真题63】Scratch云朵降雨 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

目录 scratch云朵降雨 一、题目要求 编程实现 二、案例分析 1、角色分析

玄子Share 设计模式 GOF 全23种 + 七大设计原则

玄子Share 设计模式 GOF 全23种 七大设计原则 前言&#xff1a; 此文主要内容为 面向对象七大设计原则&#xff08;OOD Principle&#xff09;GOF&#xff08;Gang Of Four&#xff09;23种设计模式拓展的两个设计模式 简单工厂模式&#xff08;Simple Factory Pattern&#x…

《计算机视觉中的多视图几何》笔记(12)

12 Structure Computation 本章讲述如何在已知基本矩阵 F F F和两幅图像中若干对对应点 x ↔ x ′ x \leftrightarrow x x↔x′的情况下计算三维空间点 X X X的位置。 文章目录 12 Structure Computation12.1 Problem statement12.2 Linear triangulation methods12.3 Geomet…

HashMap底层源码,数据结构

HashMap的底层结构在jdk1.7中由数组链表实现&#xff0c;在jdk1.8中由数组链表红黑树实现&#xff0c;以数组链表的结构为例。 JDK1.8之前Put方法&#xff1a; JDK1.8之后Put方法&#xff1a; HashMap基于哈希表的Map接口实现&#xff0c;是以key-value存储形式存在&#xff0c…

Flutter:类功能索引(全)

Flutter 类功能索引&#xff08;全&#xff09; 本文以表描述形式收录了Flutter中提供的各个类&#xff0c;旨在方便地进行查询相关组件。 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/133415589 跳转&#xff1a;字母索引 A 组件名称描述Animat…

运营小白怎么才能学会RPA自动化,RPA怎么学?

随着人工智能技术的不断发展&#xff0c;机器人流程自动化&#xff08;RPA&#xff09;已经成为了企业中不可或缺的一部分。然而&#xff0c;对于一些运营小白来说&#xff0c;如何学习 RPA 自动化仍然是一个比较困难的问题。本文将从以下几个方面来介绍如何学会 RPA 自动化&am…

c语言练习69:句⼦中的最多单词数

句⼦中的最多单词数 题⽬描述&#xff1a; ⼀个 句⼦ 由⼀些 单词 以及它们之间的单个空格组成&#xff0c;句⼦的开头和结尾不会有多余空格。 给你⼀个字符串数组 sentences &#xff0c;其中 sentences[i] 表⽰单个 句⼦ 。 请你返回单个句⼦⾥ 单词的最多数⽬ 。 • ⽰例…

YOLov5 分割数据集的制作(详细过程+代码)

1.labelme 的使用 每张图片会对应生成一个&#xff1a; 以上已经画好所有的数据集&#xff08;&#xff01;&#xff01;&#xff09; 2.这里介绍一下如果都是没有变化的数据集&#xff0c;标签的位置都一样&#xff0c;如何批量生成这个数据集 我们先将第一个数据集复制2275…

数字孪生:降低现代船舶水声设备研制风险与成本的关键要素

声波是海洋中唯一能够有效传递远距离信息的载体&#xff0c;1000Hz的声波在海水中的每公里吸收衰减仅为0.067分贝&#xff0c;而在陆地上大显神通的电磁波由于受到海水高介电常数和高导电率的影响&#xff0c;因传播衰减量太大而无法通信。 声波在海洋中的传播也并非一帆风顺。…

记录 Overleaf 上 texlive 版本选择出现的 bug

用 beamer 写幻灯片时, 用到 \footfullcite 命令以及相关设置如下: %----------- 脚标参考文献 ----------------% \usepackage[backendbibtex,sortingnone]{biblatex} \addbibresource{./content/the_ref.bib} %BibTeX数据文件及位置 \setbeamerfont{footnote}{size\tiny}%--…

MacBook Pro 电池电量限制充电怎么设置AlDente Pro for Mac最大充电限制工具

通过充电电量限制工具可以更好的保护MacBook Pro的电池&#xff0c;通过 AlDente Pro 您可以设置电池的最大充电百分比设置为 20&#xff05; 至 100&#xff05;&#xff0c;然后&#xff0c;它将保持在所需的电池百分比&#xff0c;然后再次使用电源适配器进行充电。 AlDent…

HMTL知识点系列(4)

目录 1. 在你过去的项目中&#xff0c;你如何解决HTML的布局和样式问题&#xff1f;2. 你能否解释一下HTML的“文档对象模型”&#xff08;DOM&#xff09;是什么&#xff0c;以及它的重要性&#xff1f;3. 你有没有经验处理网页的兼容性问题&#xff0c;特别是在不同浏览器之间…

Mybatis配置文件(mybatis-config.xml)和Mapper映射文件(XXXMapper.xml)模板

配置文件 ${dirver} ---> com.mysql.jdbc.Driver ${url} ---> jdbc:mysql://localhost:3306/数据库名 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""h…

TikTok的AI技术:智能推荐的幕后机制

在当今数字时代&#xff0c;社交媒体和视频共享平台成为了人们日常生活中不可或缺的一部分。TikTok&#xff08;抖音&#xff09;作为全球范围内最受欢迎的短视频平台之一&#xff0c;已经吸引了数以亿计的用户。 这一成功背后&#xff0c;有一个强大的人工智能&#xff08;AI…

Linux 压缩和解压

1、tar命令&#xff08;复杂&#xff09; 使用tar命令均可以进行压缩和解压缩的操作 语法&#xff1a;tar [-c -v -x -f -z -C] 参数1 参数2 ... 参数N -c&#xff0c;创建压缩文件&#xff0c;用于压缩模式 -v&#xff0c;显示压缩、解压过程&#xff0c;用于查看进度 -x&am…

Ubuntu系统Linux内核安装和使用

安装&#xff1a; 检查树莓派Linux版本&#xff0c;我的是6.1 uname -r 内核下载链接&#xff1a; Raspberry Pi GitHub 找对应版本下载 导入之后&#xff0c;解压安装即可 unzip linux-rpi-6.1.y.zip 其他内容 treee 指令安装 sudo apt-get install tree 使用这…

MySql数据库-SQL函数

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有需要我的支持&#xff0c;请私信或评论留言&#xff01; SQL函数 函数概念单…

CSS详细基础(四)显示模式

本帖开始介绍CSS中更复杂的内容 目录 一.显示模式 1.行内元素 2.块级元素 3.行内块元素 二.背景样式 一.显示模式 顾名思义&#xff0c;在CSS中&#xff0c;元素主要有3种显示模式&#xff1a;行内元素、块级元素、行内块元素~ 所谓块级元素&#xff0c;指的是该元素在…

No147.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

计算机网络 实验二 交换机的基本配置

实验二 交换机的基本配置 实验目的 • 掌握交换机的配置方式及切换命令&#xff1b; • 掌握交换机端口的基本配置&#xff1b; • 掌握交换机mac地址的查看与管理方法。 实验设备 以太网交换机一台服务器一台PC机五台配置电缆、网线若干 网络拓扑及IP地址分配 给计算…