前端模拟终端（二）：部分可输入而部分不可修改的多行文本域

最新推荐文章于 2024-01-30 17:13:00 发布
最新推荐文章于 2024-01-30 17:13:00 发布
阅读量883 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端模拟终端组件 IOTerm 开发记录 文章标签： 部分可输入的文本域 terminal 前端 终端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ZhangK9509/article/details/104356892
本文探讨了如何在前端模拟终端中实现部分可输入而部分不可修改的多行文本域。通过使用xterm.js和简诗项目作为参考，采用HTML元素结合JavaScript监听输入，实现实时显示并维护不可修改内容。为了优化性能，文章建议使用变量保存字符串而非索引，同时介绍了光标的实现，以提升模拟终端的真实感。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

前端模拟终端（一）：如果我的这款 IOTerm 不是你想要的
前端模拟终端（二）：部分可输入而部分不可修改的多行文本域
前端模拟终端（三）：文本显示与自动换行
前端模拟终端（四）：显示、输入与光标
前端模拟终端（五）：看谁用了 rm -rf / 之历史记录
前端模拟终端（六）：快捷输入的好助手、终端的灵魂之补全和提示

部分可输入而部分不可修改的多行文本域

  一开始也没任何头绪，除了 Google，其他可以想到的工具都用上了，找到了两个不错的项目。一个是 xterm.js，另一个是简诗。它们都使用了 canvas，不过我没有使用 canvas，主要是因为我没有用过，而且也不觉得需要使用。当然，对于如何实现一个部分可输入而部分不可修改的多行文本域，它们给出了一致答案：用一个元素来显示，用一个

最低0.47元/天 解锁文章

200万优质内容无限畅学
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1399
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
几种实现点击修改按钮可编辑文本，不点则不可编辑的方式
sinat_38224744的博客
04-28 1万+
第一种： type="text/JavaScript" language="JavaScript"> function doclick(){ var docs = document.getElementByIdx_x('url'); docs.readOnly = false; //alert("asdfasd"); } type="text" id="url
文本框/文本域，部分文字不可编辑（输入/删除等）。
qq_40639028的博客
08-09 4134
重点是要用到键盘删除事件@keydown.delete，通过该事件拿到input的e.target。如果在不能删除的区间，则阻止删除的事件@keydown.delete。以上还是存在bug，当正常输入字符发现没得问题，但当使用输入法进行文字字符等输入的时候，还是能正常的输入，因此需要再使用两个事件：@onCompositionStart输入法输入开始事件和@compositionend输入法输入结束事件。因此还需要键盘按下事件@keydown，当定位在1-7个字符之间时，阻止事件触发。......
前端input文本框不可编辑的3种方法（超实用）
lingle1的博客
05-31 4181
文章目录1.disabled2.readonly3.readonly unselectable="on" 1.disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 一起使用。 示例： 2.readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。后台会接收到传值. readonly
输入文本框或多行文本框不可编辑的情况下，如何防止退格键返回
dawenyou1362的博客
12-16 207
//防止退格键返回 $("#txtMsg").keydown(function (e) { var doPrevent; if (e.keyCode == 8) { var d = e.srcElement || e.target; if (d.tagName.toUpperCase...
前端模拟终端（三）：文本显示与自动换行
ZhangK9509的博客
02-17 1529
  前面都在说 IOTerm 中使用 div 显示文本，但其实一开始选用的是 pre 元素，因为它可以原模原样的显示，而不会少了空格。   pre 默认使用等宽字体，这也正好符合终端的需要。但是 pre 默认是不会自动换行的，文本会超出元素范围，也就是 white-space 为 pre。可以将 white-space 改成 pre-wrap，这样就可以既保留空格又能正常换行了。但是因为默认的 w...
如何将扫描的PDF转Word？这两种方法超简单
cocowei0306的博客
05-27 2164
将PDF转成Word是我们日常工作中经常使用的文档转换，但有些文档转换后还是图片无法编辑是怎么回事呢？这种情况是因为PDF是扫描件，那么如何将这种扫描的PDF文档转换成可编辑的Word呢？ 方法一：客户端批量转换 1、下载并安装极速玩转后，打开软件选择首页热门转换推荐中的PDF转Word； 2、接着根据页面提示将需要转换的PDF文档拖到转换页面，或点击添加文档上传文档均可； 如多个文档转换可批量直接上传所有需要转换的文件。然后点击右下角的“开始转换”就可以一键转换当前所有PDF文件，点击对应文档后的转换仅
前端模拟终端（四）：显示、输入与光标
ZhangK9509的博客
02-17 1326
  在前端模拟终端（二）中也介绍了关于输入与光标的内容。这一篇主要讲在 IOTerm 中是怎样实现的。   首先，显示选用的元素是 div，但是不是直接把字符串扔进 div 里就完事了。而是给每一个字符都穿上 span 小衣服，就连空格也不放过，要包裹成<span>&nbsp;</span>，为什么不是<span> </span>呢？因为这样...
前端模拟终端（一）：如果我的这款 IOTerm 不是你想要的
ZhangK9509的博客
02-17 1266
  能找到的前端模拟终端并不多，其中 xterm 最有名气。其功能全、性能好，就是代码太多，不知从何下手。索性自己开发一个吧！之前断断续续完成了基本功能。这几天，趁着疫情被困在家，完善了暂时所需的功能。准确地说，调整了主要结构，重写了大部分代码。   起名 IOTerm 是因为要求它只负责输入（Input）与输出（Output）部分，而不要管其他的事情。至于如何处理输入的数据，包括命令和没有含义的...
前端模拟终端（五）：看谁用了 rm -rf / 之历史记录
ZhangK9509的博客
02-17 676
IOTerm 的历史记录功能完全模仿真是终端，需要具备一下特性： 上下键选择历史记录。 若修改了某条历史记录但未按回车键，则该条历史记录被修改，知道在该条历史记录处按下回车。 修改某条历史记录且按回车键后，产生新的历史记录，而不改变原本的历史记录。 空行回车不被保存在历史记录中。 为了实现以上功能，设历史记录数据结构： interface historyItem { value: st...
input框不能输入
最新发布
outstanding木槿
01-30 2479
如果以上两种情况都没问题，还有就是看看文件里有没有监听键盘事件例如：keydown，keyup，keypress等，看看是否阻止了默认事件，比如使用了preventDefault()，这个时候一定要检查清楚，如果使用了jquery，看看有没有return false的代码，因为在jquery中return false，既阻止了冒泡，又消除了默认事件。就是我目前碰到的情况，父组件里套着子组件，子组件是个弹窗，在弹窗里对公告标题输入，发现输入后光标一离开，输入的内容就不显示。
让input框中的部分文字无法删除的实现方式
weixin_34061555的博客
11-05 1143
你有没有这种需求，文本输入框中的内容，前半部分保持不变，只让用户操作后半部分，如果有就来看看我的实现方法，很简单的方法看到上图了吗？文本框的前半部分是没有办法修改的，用户只能在目前的域名后面进行输入，实现代码如下：<HTML> <BODY> <label style="margin-right: -245px;">http://www.xi...
Vue2详解
m0_71229255的博客
10-02 2910
Vue是一套**构建用户界面**的**渐进式 框架****构建用户界面**：基于数据渲染出用户可以看到的界面**渐进式**：所谓渐进式就是循序渐进，不一定非得把Vue中所有的API都学完才能开发Vue，可以学一点开发一点 * Vue的两种开发方式： 1. Vue核心包开发。场景：局部模块改造 2. Vue核心包&Vue插件&工程化
vue-quill-editor 富文本编辑器禁用/不可编辑
julying的博客
08-15 2万+
最近需要用vue做一个富文本编辑器，我选择了vue-quill-editor，可是需要实现禁用的效果，Quill-editor官方网站上虽然说明了如何禁用，但我没有找到用vue如何实现的方法，在网上也没有找到解决方法后，我自己实现了一下。 vue： &amp;lt;el-form-item label=&quot;描述：&quot; :label-width=&quot;formLabelWidth&quot;&amp;gt; ...
vue 使用 ueditor 编辑器，设置不可编辑和可编辑，笔记，补充打开右键功能
cscscssjsp的博客
01-09 8277
设置可编辑和不可编辑，先上效果图 1.不可编辑状态 2.可编辑状态 通过点击按钮实现切换编辑状态 代码 1.关于vue 使用editor，请移步参考我另一篇文章： vue 集成ueditor（百度富文本编辑器）以及使用后端Java上传图片到服务器，特别注意的大坑 2.以下是已此为基础实现的 使用的地方 xx.vue，下面标签是自定义的组件，editor 被导入时组件名为hz...
elementUI如何设置input不可编辑
追求卓越583的博客
01-18 3411
elementUI如何设置input不可编辑
前端文本输入框不能删除某指定字符
L99233的博客
02-20 973
前端文本输入框不能删除某指定字符
【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）
热门推荐
一个努力学习的程序猿
04-11 3万+
在最近的开发过程中，遇到了关于拖拽排序的功能需求。在这里向大家推荐使用 vuedraggable。
Vue动态改变属性 禁用文本框
Connie1451的博客
08-20 3646
data:  
多行文本域字符限制实现与字母汉字区分
限制多行文本域输入的字符个数可以帮助开发者控制用户输入内容的长度，以满足数据库存储或前端显示的需要。同时，区分字母和汉字的输入是为了更好地处理不同语言环境下的用户输入，确保用户体验的一致性和后端处理的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值