React div 实现一个 textarea

看到标题,老爷们肯定不满意,切,用 div 实现一个 textarea 有啥难度,不就是 contenteditable 吗?

看到 React,又要多加一句:切,跟用什么库有什么关系。实际上在使用的时候,我还是遇到了一点微小的麻烦。

全选

在 textarea 中,全选只需要使用 element.select() 就可以,它的作用是:

The HTMLInputElement.select() method selects all the text in a <textarea> element or an <input> element with a text field.

然而在 div 中,没有这样的函数,所以需要自己划定范围并且选中:

const selection = window.getSelection()
const range = document.createRange()
range.selectNodeContents(this.textInput) // DOM
selection.removeAllRanges()
selection.addRange(range)

纯文字的切换

textarea 中,所有内容都会变成文本,但是在 div 中,我们很容易受到转义的影响。

尽管 user-modify: read-write-plaintext-only; 这个可以免于标签注入的烦恼,但是依旧会遇到换行的问题,换行操作在 div 中是 <br />,对于文本来说是 \n,于是,我们还需要在转换时做一遍替代:

this.initInput = input.replace(/\n/g, '<br />')

无警告渲染的方式

在 React 中,如果你用 div 取代输入,会有一个 warning 警告,虽然不影响使用,但是 warning 总是让人浑身难受,这种时候以下两个属性可以避免这个烦恼:

suppressContentEditableWarning={true}
dangerouslySetInnerHTML={{ __html: this.initInput }}

剩下的都不是什么大问题,相信大家是能搞定的!

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 代码段, react

添加新评论