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

news/2025/2/15 4:12:56/

前些天,写了探索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…