javascript - 模仿div中的textarea
问题描述
使用 React 我正在尝试构建一个用于突出显示文本的组件。
为了做到这一点,我在同一级别上有一个 textarea 元素和一个 div,将 textarea 的值复制到 div 中。我的代码如下。
textarea 在 TextArea 组件内,而 div 在 HighlightedDiv 组件内。
我刚刚发现 div 处理换行符和空格的方式与它们在 textarea 中的处理方式不同。因此,当我在 textarea 内输入多个空格时,div 只显示一个空格。当我在 textarea 中按 enter 时,div 中的文本保持在同一行。
在某处我发现将其添加到 div 的 css 样式可以修复:
white-space: pre;
确实如此,但是现在我还希望我的文本在碰到 div 的边框时继续换行,就像我使用以下 css 时一样:
white-space: normal;
word-wrap: break-word;
显然,问题是我需要空白:pre 和空白:正常。也就是说,说得太清楚了,这是不可能的。
有谁知道另一种方式来达到我想要的?
我的代码:
(我使用的是样式库,样式组件,所以下面的 StyledTextArea 和 Div 元素分别只是纯文本区域和 div。)
高亮文本区域(父):
import React, { Component } from 'react'
import styled from 'styled-components'
import HighlightDiv from './HighlightDiv'
import TextArea from './TextArea'
const Container = styled.div`
border: 1px green solid;
width: 100vh;
padding: 20px;
`
export default class HighlightTextArea extends Component {
constructor() {
super()
this.state = {
text: ''
}
}
setHighlightTextAreaState = (newStateObject) => {
for (let key in newStateObject) {
this.setState({ [key]: newStateObject[key] })
}
}
render() {
return (
<Container>
<TextArea setHighlightTextAreaState={this.setHighlightTextAreaState}/>
<HighlightDiv text={this.state.text}/>
</Container>
);
}
}
文本区域(儿童):
import React, { Component } from 'react'
import styled from 'styled-components'
const StyledTextArea = styled.textarea`
border: 1px solid blue;
font-family: 'Inconsolata', monospace;
font-size: 1rem;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
z-index: 20;
color: blue;
opacity: 0.5;
`
export default class TextArea extends Component {
constructor(props) {
super(props)
}
handleChange = (event) => {
console.log("TextArea.handleChange - event.target.value:")
console.log("\"" + event.target.value + "\"")
console.log("TextArea.handleChange - event.target.value.length: " + event.target.value.length)
this.props.setHighlightTextAreaState({
text: event.target.value,
})
}
// componentDidMount() {
// let textAreaRect = document.getElementById("text-area").getBoundingClientRect()
//
// }
render() {
return (
<StyledTextArea id="text-area" onChange={this.handleChange}></StyledTextArea>
);
}
}
HighlightDiv(儿童):
import React, { Component } from 'react'
import styled from 'styled-components'
const Div = styled.div`
border: 1px solid red;
font-family: 'Inconsolata', monospace;
font-size: 1rem;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: red;
text-align: left;
white-space: normal;
word-wrap: break-word;
`
export default class HighlightDiv extends Component {
constructor(props) {
super(props)
}
renderTextHtml = () => {
// Loop over all characters in this.props.text
// Check if character is space or enter
}
render() {
return (
<Div>
{this.props.text}
</Div>
)
}
}
解决方案
你应该使用white-space: pre-wrap;
堆栈片段 - 并排div
/textarea
div {
white-space: pre-wrap;
}
/* for the purpose of this demo */
div, textarea {
display: inline-block;
vertical-align: top;
width: 220px;
height: 220px;
font-size: 16px;
font-family: arial;
overflow: hidden;
}
<div>But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?'
She smiled, and smiled, and passed it off Ere from the door she stept
</div>
<textarea>But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?'
She smiled, and smiled, and passed it off Ere from the door she stept
</textarea>
推荐阅读
- dataweave - Mulesoft Dataweave 表达式引发错误
- functional-programming - 多范式语言中的函数式编程结构如何有用?
- java - IntelliJ runClient 无法使用 minecraft forge
- angular - 使用 rxjs concatMap() 运算符按角度顺序(串行)一个接一个地通过角度 Http 发送文件
- python - Python将来自日志文件不同行的三个字符串连接成一行
- authentication - 如何关闭身份验证会话?
- c++ - 计算缩放多边形的比率以获得多边形的给定面积
- java - 全屏矩形是如何确定的?
- windows - 在 Windows 批处理脚本中使用索引进行查询
- python - PCA 后的最优特征选择技术?