当前位置: 首页 > news >正文

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

前些天,写了探索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.lryc.cn/news/178391.html

相关文章:

  • 估计、偏差和方差
  • 正态分布的概率密度函数|正态分布检验|Q-Q图
  • 【接口测试】HTTP协议
  • 【重新定义matlab强大系列十四】基于问题求解有/无约束非线性优化
  • MySQL 索引介绍和最佳实践
  • 区块链(7):p2p去中心化之初始化websoket服务端
  • 原型、原型链、判断数据类型
  • pycharm中配置torch
  • 什么是Times New Roman 字体
  • 企业会议新闻稿怎么写?会议类新闻稿如何撰写?
  • 算法 滑动窗口最大值-(双指针+队列)
  • Java 并发编程面试题——BlockingQueue
  • Ubuntu Nacos开机自启动服务
  • C++核心编程--继承篇
  • 小程序 解决自定义弹窗滚动穿透问题,解决弹窗背景内容滚动问题
  • win10搭建Selenium环境+java+IDEA(2)
  • 抢先一步感受未来:Raspberry Pi 5正式发布!
  • 【教程】Ubuntu自动查看有哪些用户名与密码相同的账户,并统一修改密码
  • 基于 Python+DenseNet121 算法模型实现一个图像分类识别系统
  • 贪心算法-点灯问题
  • 软件测试之单元测试自动化入门基础
  • 93 # 实现 express 错误处理中间件
  • PHP 创建 MySQL 表
  • 中兴R5300 G4服务器iSAC管理员zteroot密码遗失的重置方法及IPV6地址启用设置
  • 大数据分布式处理框架Hadoop
  • echarts学习总结
  • 与初至波相关的常见误解
  • screenfull全屏、退出全屏、指定元素全屏的使用步骤
  • 问题 - 谷歌浏览器 network 看不到接口请求解决方案
  • Java:正则表达式的命名捕获组