最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示:

  最初的解决方案是采用富文本编辑器,把所有句段信息都用HTML标签包裹,操作空间比较大,页面上需要的功能几乎都可以实现,但是由此带来了许多的弊端,比如:

   1.复制文本存在原始格式

   2.复制大量文本存在性能问题(富文本编辑器的通病,复制几十万文字的文本可能导致页面崩溃)

   3.截取文本操作难度较大...

  目前看业界主流的翻译软件,都是采用textarea + 富文本组合,这种解决方案可以极大的避免复制文本格式与页面性能问题,虽然页面操作空间没有富文本编辑器大,但是大多数场景是可以满足要求的。

  废话少说,textarea文本的高亮主要借助于selectionStart/selectionEnd两个属性,配合文本的focus即可实现文本的选中效果,MDN有详细的解释,如下:

  

      实现代码如下:

    

<template>
<section>
<textarea ref="textarea" name="test" id="" cols="30" rows="10" v-model="txt"></textarea>
</section>
</template> <script>
export default {
name: 'i-select',
data () {
return {
txt: '这是一段测试文本',
}
},
mounted () {
let node = this.$refs.textarea
node.selectionStart = 0
node.selectionEnd = 5
node.focus()
}
}
</script>

效果如下:

  

textarea中文本高亮选中的更多相关文章

  1. CSS3禁止网页中文本被选中代码

    通常大家会有js来实现,另一个方案就是,将-webkit-user-select 和-moz-user-select 的值设为none,这针对于移动用户,可能会很有用.请谨慎使用这个属性:因为大部分用 ...

  2. 设置输入域(input/textarea)中文本光标的位置

    以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...

  3. IOS中tableView每组的头部控件、通过tableView的代理方法控制某一行的cell能否达到高亮选中状态

    一.tableView每组的头部控件 1.控件宽度默认就是tableView的宽度 2.控件高度由下面的代理方法决定 - (CGFloat)tableView:(UITableView *)table ...

  4. 微信小程序-textarea中的文本读取以及换行问题

    今天客户那边要求textarea中输入的问题可以按回车键换行,而我使用的是bindinput获取值,但是呢bindinput 处理函数的返回值并不会反映到 textarea 上,按回车键导致点击换行符 ...

  5. jQuery获取textarea中的文本

    今天出了一个bug,用$("#textareaid").text()获取textarea中的信息在IE下没问题,在火狐中居然获取不到信息,经过查阅资料才发现,应该用$(" ...

  6. 10款jQuery文本高亮插件

    [编者按]本文作者为 Julian Motz,主要介绍十款 jQuery 文本高亮插件的现状.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 很多应用或网站都为用户提供搜索关键词的方法.为了 ...

  7. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  8. textarea中限制输入字符长度(实用版)

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

  9. 选中CheckBoxList的值放到TextBox中,再次选中从textBox中删除

    当选中checkboxlist中的值,直接放到文本框中,在checkboxlist的SelectedIndexChanged事件下执行方法, //将选中的值放到文本框中                ...

随机推荐

  1. NET Framework项目移植到NET Core上遇到的一系列坑(2)

    目录 获取请求的参数 获取完整的请求路径 获取域名 编码 文件上传的保存方法 获取物理路径 返回Json属性大小写问题 webconfig的配置移植到appsettings.json 设置区域块MVC ...

  2. js 五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解

     壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是 ...

  3. Python活力练习Day3

    Day3:请输入星期几的第一个字母来判断是星期几,如果第一个字母一样,则继续判断第二个字母. #这是一道典型的题,一次输入一个字母,首字母匹配一个list里的内容.如果匹配到多个,再输入并匹配第二个字 ...

  4. mitmproxy 使用笔记

    零.背景 我之前写过关于 charles 的使用笔记,为什么现在又要来写同类型的 mitmproxy 工具呢?下面我会娓娓道来他比 charles 多出的强大功能. 一.介绍 mitmproxy 是一 ...

  5. Java面向对象之构造器

    目录 Java面向对象之构造器 利用构造器确保初始化 构造器重载 Java面向对象之构造器 利用构造器确保初始化 初始化问题是关系编程方式是否安全的一个重要的问题. 功能:在创建对象时执行初始化. 在 ...

  6. 流程图软件 drawio 免费 github开源

    做程序需要画流程图,发现迅捷流程图的在线版挺好用的,但是,它的导出只允许VIP会员,不是VIP会员只能导出xsd文件,而且要注册账号,极为麻烦. 在知乎看到了一位网友的评论,有一款软件和迅捷流程图一模 ...

  7. Asp.net Core3.0 跨域配置

    原文:http://www.zilaohu.cn/Jie/Detail_Jie?ID=78840a04-55b8-4988-80b2-f964fd822d63 下面配置后:被拒绝的域请求后,可以进入方 ...

  8. Android 非法字符:'/ufeff'

    [问题来源] 不知道大家有没有做过这样的事,在Android开发的过程中,通过文本直接修改代码,不打开编译器,然后提交让同时编译运行.这时Android编译就会报错,指定修改的文件开始位置,显示非法字 ...

  9. 2、netty第一个例子,简单的http服务器

    用netty来启动一个简单的可处理http请求的服务器. 依照前面写的使用netty的过程.贴上代码 server import io.netty.bootstrap.ServerBootstrap; ...

  10. windows下安装mysql教程

    1.下载安装包-根据自己电脑系统选择合适的版本: https://dev.mysql.com/downloads/mysql/ 2.配置环境变量 2.1 解压所下载的压缩包 2.2 环境变量 win ...