程序员教你如何用原生JS实现一个文本划线功可以

  • 时间:2018-06-17 21:02 作者:小菜鸟程序员 来源:小菜鸟程序员 阅读:190
  • 扫一扫,手机访问
摘要:0x1. 原因得到 APP 中有个文稿板块,这部分是内嵌的前台开发的 Web 页面,支持在用户端和微信中访问,其中有一个称为划线笔记的功可以,就是长按文字之后,对选中的文字做标记,这是背景。在一次需求迭代过程中,产品对划线笔记的功可以提出了少量问题,比方为什么 iOS 和 Android 的样式不统
程序员教你如何用原生JS实现一个文本划线功可以

0x1. 原因

得到 APP 中有个文稿板块,这部分是内嵌的前台开发的 Web 页面,支持在用户端和微信中访问,其中有一个称为划线笔记的功可以,就是长按文字之后,对选中的文字做标记,这是背景。

在一次需求迭代过程中,产品对划线笔记的功可以提出了少量问题,比方为什么 iOS 和 Android 的样式不统一(使用的是系统原生的长按选中),是不是能实现单击即可以选中文字,是不是能自己设置样式,是不是能正反选……

对前台有兴趣或者者正在学习web前台的小伙伴,能私信小编【学习】就可免费领取2018最新的一整套系统web前台学习教程!

听到这里我的内心是这样的

程序员教你如何用原生JS实现一个文本划线功可以

本着跟产品友好相处的准则,我当即表示这个些需求很棒,我需要认真想一下怎样拒绝。

0x2. 分析

当然,想法归想法,做还是要想办法做的

程序员教你如何用原生JS实现一个文本划线功可以

从产品的需求看,只有自己模拟一个系统的长按选中才能满足产品现阶段及将来可可以潜在的需求。假如模拟一个长按选中,大概需要处理这么几个问题:

  • 需要禁使用系统的长按选择文字
  • 需要获取到点击字符确实切位置
  • 需要可以够模拟选中时的矩形背景

0x3. 实现

针对刚才的分析,大概能这样实现:

第一点,增加 user-select: none 的样式,这样能直接禁使用系统的文字选择;

第二点,可以够间接或者者直接获取字符位置的 dom API, 大概只有间接的通过 Range.getClientRects()

第三点,最初构思有两个方案,一个是直接在文字中插入标签,这样势必会改变整个 dom 的结构,对后续的标记造成影响,于是采使用第二个方案,直接加一个 svg 层,通过 svg 的多边形和矩形来绘制

程序员教你如何用原生JS实现一个文本划线功可以

这个方案有以下有点:

  • 自己设置选择样式
  • 点击选中当前句子
  • 长按选中当前句子
  • 正向反向选择
  • 高亮标记选中的文字
  • ......
  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】Discuz隐藏后台admin.php网址修改路径(2019-12-15 14:52)
【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
【系统环境|软件环境】更新版ThreeJS 3D粒子波浪动画(2019-12-04 14:26)
【系统环境|软件环境】前台开发WebStorm常用快捷键,火速收藏!(2019-12-04 14:25)
【系统环境|软件环境】微博H5登录和发微博组件(2019-12-04 14:25)
手机二维码手机访问领取大礼包
返回顶部