当然是不可能的。。。
如果你还有兴趣继续看的话，想和大家交流一下我最近做的一个可以显示行数的textarea。只是一个不到300行代码的小玩具啦。演示和代码
（专业的wysiwyg或者代码编辑器，请看quilljs, ace editor等）
最近接到这么一个需求，要对一个textarea的数据进行格式验证。用户会输入几十个几百个IP地址，一行一个。验证是很容易，但是如果出错的话，用户并不知道是哪里出的错。textarea是不能加style的，所以我想能不能显示行数，这样就可以反馈给用户是哪里出错了。
HTML 结构
<div>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</di>
<textarea></textarea>
</div>几个实现上要考虑的问题
左边显示行数的DIV要和右边的textarea保持相同的高度。
css的flexbox可以很好的解决这个问题。（不用写js代码啦）
支持滚轮（scroll，两边要同步）
右边textarea如果滚动了，左边的div也要跟着滚。
听scroll事件，更新左边div的transform: translateY()值。这个据说是比top，bottom快。
左边div宽度更新
因为用了position: abosolute，所以这一块要手动处理。首先算最长的长度，再更新div的padding-left的值。
检测什么时候换行了
图中红叉的地方是不该显示行数的，因为是在同一个句子内。这就需要计算一个句子会占多少行。这就麻烦了，这一块我写的不好。
首先要算一行能放多少的字符。我用的方法是新建一个div，不断往里面加字符，测宽度，然后和textarea的宽度作比较。如果正好能被容纳，那么那个div里的字符数就是我们要求的值。这个方法不光听起来就蠢，还不准确。请看下图。
实际可用宽度是36.534，实际文字宽度是36.6477,所以是放不下的。但是clientWidth的精度只到整数，测下来是37，按这个结果看的话，那段文字是可以放得下的。[掀桌子]（为什么要用clientWidth？因为滚动条会占空间。）这就麻烦了。
然后就是要算每一个句子都占多少行。（在white-space: pre-wrap的情况下）这也很麻烦，这个换不换行是浏览器决定的，要精确地还原似乎也不大容易。对空格，减号的处理都有特殊情况。这个我也就做了一个大概。
更新可用宽度
三种情况需要更新textarea的可用宽度：
- 左边div宽度改变
- 滚动条的出现/消失
- 拖拽改变textarea的大小
对于1，我们之前就处理过，好改。
对于2，听一下input事件，看textarea的clientHeight有没有变。滚动条是会占用clientHeight的。
对于3，textarea没有resize事件，又要手动弄了。查了一下是要听鼠标点击和松开事件。于是我做了下面的试验：
相同的操作：在textarea上按下鼠标，移开到textarea之外放开。结果三个浏览器的结果全不一样！不过至少都能听到mousedown事件，总算有切入的地方。具体实现可以看代码，文字叙述不大容易。要注意的是mousemove也要听，否则这样：
还有一个写代码时我遇到的问题是如果把textarea缩到很小，浏览器就卡住了。直觉是遇到无限循环了。果然，是因为一行内一个字符也容不下的时候，那么就需要无限行。加了一个特殊条件处理的if之后解决了。
不换行
这个firefox和edge还不一样（我只试了三个浏览器，外加chrome）。一个要用white-space: pre，一个要用white-space: nowrap。（chrome都可以）
结束
当然，真正要做网页编辑器的话是不可能用textarea的，我的这个东西在有限的场景里可能是会有用的。想了解实际的编辑器可以看这个文章。
第一次发文章，不是教程，算是经验交流吧。欢迎大家讨论。
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。