textarea中文本高亮选中
最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示:
最初的解决方案是采用富文本编辑器,把所有句段信息都用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中文本高亮选中的更多相关文章
- CSS3禁止网页中文本被选中代码
通常大家会有js来实现,另一个方案就是,将-webkit-user-select 和-moz-user-select 的值设为none,这针对于移动用户,可能会很有用.请谨慎使用这个属性:因为大部分用 ...
- 设置输入域(input/textarea)中文本光标的位置
以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...
- IOS中tableView每组的头部控件、通过tableView的代理方法控制某一行的cell能否达到高亮选中状态
一.tableView每组的头部控件 1.控件宽度默认就是tableView的宽度 2.控件高度由下面的代理方法决定 - (CGFloat)tableView:(UITableView *)table ...
- 微信小程序-textarea中的文本读取以及换行问题
今天客户那边要求textarea中输入的问题可以按回车键换行,而我使用的是bindinput获取值,但是呢bindinput 处理函数的返回值并不会反映到 textarea 上,按回车键导致点击换行符 ...
- jQuery获取textarea中的文本
今天出了一个bug,用$("#textareaid").text()获取textarea中的信息在IE下没问题,在火狐中居然获取不到信息,经过查阅资料才发现,应该用$(" ...
- 10款jQuery文本高亮插件
[编者按]本文作者为 Julian Motz,主要介绍十款 jQuery 文本高亮插件的现状.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 很多应用或网站都为用户提供搜索关键词的方法.为了 ...
- Jquery实现textarea根据文本内容自适应高度
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...
- textarea中限制输入字符长度(实用版)
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...
- 选中CheckBoxList的值放到TextBox中,再次选中从textBox中删除
当选中checkboxlist中的值,直接放到文本框中,在checkboxlist的SelectedIndexChanged事件下执行方法, //将选中的值放到文本框中 ...
随机推荐
- 【Dos】复制指定文件夹下所有文件到另外指定文件夹下
bat代码如下: @echo off @set /p fromFile=from: @set /p toFile=to: rem 找到所有文件 dir /b /s %fromFile%\ *.gz & ...
- Dockerfile制作镜像
Dockerfile简介 dockerfile 是一个文本格式的配置文件, 用户可以使用 Dockerfile 来快速创建自定义的镜像, 另外,使用Dockerfile去构建镜像好比使用pom去构建m ...
- 2018 经典的CVPR 关于ImageCaptioning论文
1. SemStyle: Learning to Generate Stylised Image Captions using Unaligned Text(2018 CVPR) 主要研 ...
- C++ std::deque 基本用法
#include <iostream> #include <string> #include <deque> // https://zh.cppreference. ...
- Leetcode92: Reverse Linked List II 翻转链表问题
问题描述 给定一个链表,要求翻转其中从m到n位上的节点,返回新的头结点. Example Input: 1->2->3->4->5->NULL, m = 2, n = 4 ...
- 从. NET 和 Java 之争谈 IT 这个行业
一.有些事情难以回头 开篇我得表名自己的立场:.NET JAVA 同时使用者, 但更加偏爱. NET. 原因很简单 NET 语言更具开放性, 从开源协议和规范可以看出; 语言更具优势严谨; 开发工具 ...
- 【解决】Failed to restart network.service: Unit network.service not found.
问题:使用systemctl restart network 或 service network restart 命令重启网卡失败. 分析:原因其实也很简单,命令用错了,造成了找不到相应的网卡服务. ...
- MyBatis框架之第一篇
MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis.201 ...
- 松软科技web课堂:JavaScript If...Else 语句
条件语句用于基于不同条件执行不同的动作. 条件语句 在您写代码时,经常会需要基于不同判断执行不同的动作. 您可以在代码中使用条件语句来实现这一点. 在 JavaScript 中,我们可使用如下条件语句 ...
- dpwwn: 1 Vulnhub Walkthrough
主机层面扫描: ╰─ nmap -p1-65535 -sV -A 10.10.202.130 22/tcp open ssh OpenSSH 7.4 (protocol 2.0) 80/ ...