首页 > 其他分享 >使用 html 页面编辑精确定位文本文件选中

使用 html 页面编辑精确定位文本文件选中

时间:2024-03-20 19:57:28浏览次数:19  
标签:selection range html 选中 divElement 文本文件 var 精确定位 document

如下是一个实例,实现了文本的换行,选中以及滚动到选中文本位置的功能?

<html style='height:100%;'>
<head>
    <meta charset='UTF-8' />
</head>
<body style='height:100%;padding:0;margin:0;border-width:0;'>
    <div id="content" contenteditable='true' style='height: 100%; width: 100%; white-space: pre-wrap; overflow-y: scroll;'>
    </div>
    <script>
        var str = "xxx";
        var div = document.getElementById('content');
        div.textContent = decodeURIComponent(str);
    </script>
</body>
</html>

 

var startIndex = 100;
var endIndex = 120;
var range = document.createRange();
var selection = window.getSelection();
var divElement = document.getElementById('content');
range.setStart(divElement.firstChild, startIndex);
range.setEnd(divElement.firstChild, endIndex);
selection.removeAllRanges();
selection.addRange(range);

// 让选定内容滚动到可见区域
var rect = range.getBoundingClientRect();
divElement.scrollTop = rect.top - rect.height;
divElement.focus();

 

标签:selection,range,html,选中,divElement,文本文件,var,精确定位,document
From: https://www.cnblogs.com/nanfei/p/18085940

相关文章

  • HTML 最详细的课件总结
    前言:2016年7月,雅虎核心资产被美国电信巨头Verizon,以48亿美元收购。雅虎倒台后它里面的互联网人才在一小时之内被抢夺一空。当时的互联网缺口异常大。一直到近几年互联网的快速发展不断涌入了一批批新鲜血液,在由于互联网的不断壮大需要新鲜的血液注入所以这个行业一致都......
  • Html2canvas——图片空白的几种排查解决方案
    问题:用html2canvas生成画布图片,再转成pdf。生成图片时内容结构里的图片显示空白。解决:首先服务器设置图片允许跨域,如阿里云腾讯云配置跨域规则。其次图片设置crossOrigin=“anonymous”,并且拿到图片地址加随机参数如src+‘?v=’+Math.random()防止使用缓存,再者html2canvas......
  • webpack5零基础入门-11处理html资源
    1.目的主要是为了自动引入打包后的js与css资源,避免手动引入2.安装相关包npminstall--save-devhtml-webpack-plugin3.引入插件constHtmlWebpackPlugin=require('html-webpack-plugin');4.添加插件(通过new方法调用)/**插件*/plugins:[//plugin配置......
  • HTML学习(3)(HTML字符格式)
    常见的字符格式有字体颜色,字体大小,加粗,倾斜等。字符格式化标签标签功能标签功能<b>定义粗体文本<sub>定义下标字<em>定义着重文本<sup>定义上标字<i>定义斜体字<ins>定义插入字<small>定义小号字<del>定义删除字<strong>定义加重语气<u>下画线计算机输出标签标签功能<code>定义计......
  • 基于Html对父页面打开子页面Dialog()的使用
    1、背景:​ 作者在写项目的时候,遇到了一个很坑的问题,项目前端基于QUI,但是大部分是js+css实现。​ 有一个功能:列表页面使用Dialog()组件打开编辑、新增窗体,编辑、新增窗体点击提交关闭窗体,能够刷新列表页面,无论怎么百度就是找不到可以实现的方法,最终功夫不负有心人,终于找到了一......
  • 19.html+css网页设计实例/“美妆”口红主题介绍/web前端期末大作业/
    前言本文以“美妆”口红网页为主题设计,本实例系统文件种类包含:html结构文件、css网页样式文件。应用DIV、点击事件、表格、搜索等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,三连支持下吧,3Q!有兴趣的......
  • 64卦算卦html
    html如下,新建一个txt,复制进去,改名为html即可<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><inputid="a"/><br/><......
  • HTML期末大作业~HTML眼镜网站~Web大学生网页成品-s08
    HTML期末大作业~学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作,HTML网页设计结课作业↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓http://imianba.cn/#/articles?category=1&theme=0↑↑↑↑↑↑......
  • HTML学习记录(2)(HTML常用标签)
    一,p与hrp段落可以将HTML文段分割为若干段落。段落常用<p>标签来定义,用align来定义段落的对齐方式实列<p>我是第一个段落</p><p>我是第二个段落</p><palign="left">我在左边</p><palign="center">我在中间</p><palign="right">我在右边</p>......
  • HTML一键打包工具1.9.95更新发布, 新增支持防止截图,获取命令行参数等新功能
    HTML一键打包EXE工具是一款强大的应用程序,能够将任意HTML项目或网页转换为独立的EXE文件。这意味着无需额外安装浏览器或服务器,用户只需简单双击即可运行项目。无论您是在制作KRPano全景VR项目,开发WebGL游戏(如Egret、Cocos、RPGMVMaker),还是需要打包课件或网站,这款工具都能帮助您......