ZhangK9509的博客

  IOTerm 的补全和提示功能是与真实终端最不一样的地方。  IOTerm 提供了 setTabHandler(tabHandler: Function) 方法用于设置处理补全和提示的函数。该函数有两个输入参数，一是用户输入的内容，二是当前输入光标的位置。返回值必须是字符串数组，或者空数组。具体操作如下：补全和提示功能同样由 <Tab> 键触发。第一次按 <Tab&gt...

IOTerm 的历史记录功能完全模仿真是终端，需要具备一下特性：上下键选择历史记录。若修改了某条历史记录但未按回车键，则该条历史记录被修改，知道在该条历史记录处按下回车。修改某条历史记录且按回车键后，产生新的历史记录，而不改变原本的历史记录。空行回车不被保存在历史记录中。为了实现以上功能，设历史记录数据结构：interface historyItem { value: st...

  在前端模拟终端（二）中也介绍了关于输入与光标的内容。这一篇主要讲在 IOTerm 中是怎样实现的。  首先，显示选用的元素是 div，但是不是直接把字符串扔进 div 里就完事了。而是给每一个字符都穿上 span 小衣服，就连空格也不放过，要包裹成<span>&nbsp;</span>，为什么不是<span> </span>呢？因为这样...

  前面都在说 IOTerm 中使用 div 显示文本，但其实一开始选用的是 pre 元素，因为它可以原模原样的显示，而不会少了空格。  pre 默认使用等宽字体，这也正好符合终端的需要。但是 pre 默认是不会自动换行的，文本会超出元素范围，也就是 white-space 为 pre。可以将 white-space 改成 pre-wrap，这样就可以既保留空格又能正常换行了。但是因为默认的 w...

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

  能找到的前端模拟终端并不多，其中 xterm 最有名气。其功能全、性能好，就是代码太多，不知从何下手。索性自己开发一个吧！之前断断续续完成了基本功能。这几天，趁着疫情被困在家，完善了暂时所需的功能。准确地说，调整了主要结构，重写了大部分代码。  起名 IOTerm 是因为要求它只负责输入（Input）与输出（Output）部分，而不要管其他的事情。至于如何处理输入的数据，包括命令和没有含义的...