CodeSky 代码之空

随手记录自己的学习过程

React div 实现一个 textarea

2018-05-11 19:54分类: JavaScript评论: 0

看到标题,老爷们肯定不满意,切,用 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 中,没有这样的函数,所以需要自己划定范围并且选中:

1const selection = window.getSelection()
2const range = document.createRange()
3range.selectNodeContents(this.textInput) // DOM
4selection.removeAllRanges()
5selection.addRange(range)
6

纯文字的切换

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

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

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

无警告渲染的方式

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

1suppressContentEditableWarning={true}
2dangerouslySetInnerHTML={{ __html: this.initInput }}
3

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

评论 (0)