javascript - React:编辑 contentEditable div 时如何保持插入符号位置?
问题描述
目前
- 我有一个反应组件,它
newValue
在用户单击 contentEditable 时存储 a<div>
,并在用户键入时更新newValue
。注意:我以这种方式设置此行为的主要原因有两个:(1)我不想在每次击键时发送要保存的数据,以及(2)我计划使用此 div 的变体,其中检查每个输入以验证输入是否为数字。 newValue
失去焦点时发送保存,然后<div>
重置道具的状态。
问题
将onChangeHandler
可编辑 div 中插入符号的位置移动到左侧。这导致击键123456
显示为654321
代码:
class Input extends Component {
constructor(props) {
super(props);
this.state = {
//newValue input by user
newValue : undefined
}
}
//handler during key press / input
onChangeHandler = event => {
let targetValue = event.currentTarget.textContent;
this.setState({"newValue": targetValue})
}
//handler when user opens input form
onBlurHandler = event => {
//some code that sends the "newValue" to be saved, and resets state
}
render() {
//determine which value to show in the div
let showValue;
//if there is a new value being input by user, show this value
if (this.state.newValue !== undefined) {
showValue = this.state.newValue;
} else {
//if prop has no value e.g. null or undefined, use "" placeholder
if (this.props.value) {
showValue = this.props.value;
} else {
showValue = "";
}
}
return (
<table>
<tbody>
<td>
<div
contentEditable="true"
suppressContentEditableWarning="true"
onInput={this.onChangeHandler.bind(this)}
onBlur={this.onBlurHandler}
>{showValue}
</div>
</td>
</tbody>
</table>
)
}
}
export default Input;
笔记
- 我以前使用
<textarea>
没有此问题的 a 执行此操作,但切换到<div>
以更好地控制自动调整 div 高度行为(参考CSS:删除滚动条并替换为 table <td> 中 textarea 的可变高度) - 我已经能够找到许多相关的答案,但没有一个是特定于反应的,例如在 contenteditable div 中保持光标位置。我假设因为反应在每次笔划后重新加载组件,所以这个问题正在发生。
- 我以前没有 ChangeHandler onInput,这工作正常,但我无法记录每次按键并验证字符是否为数字。
解决方案
我能够在https://stackoverflow.com/a/13950376/1730260中获得以下解决方案
主要变化:
- 添加
EditCaretPositioning.js
具有 2 个功能的新组件:(1) saveSelection 保存插入符号位置,以及 (2) restoreSelection 恢复插入符号位置。 - 将插入符号位置保存在
Input
组件的状态中 saveSelection()
每次更改事件后调用restoreSelection()
作为设置状态后的回调- 添加
id
到<div>
所以可以在restoreSelection()
函数中引用
EditCaretPositioning.js
const EditCaretPositioning = {}
export default EditCaretPositioning;
if (window.getSelection && document.createRange) {
//saves caret position(s)
EditCaretPositioning.saveSelection = function(containerEl) {
var range = window.getSelection().getRangeAt(0);
var preSelectionRange = range.cloneRange();
preSelectionRange.selectNodeContents(containerEl);
preSelectionRange.setEnd(range.startContainer, range.startOffset);
var start = preSelectionRange.toString().length;
return {
start: start,
end: start + range.toString().length
}
};
//restores caret position(s)
EditCaretPositioning.restoreSelection = function(containerEl, savedSel) {
var charIndex = 0, range = document.createRange();
range.setStart(containerEl, 0);
range.collapse(true);
var nodeStack = [containerEl], node, foundStart = false, stop = false;
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType === 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
range.setStart(node, savedSel.start - charIndex);
foundStart = true;
}
if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
range.setEnd(node, savedSel.end - charIndex);
stop = true;
}
charIndex = nextCharIndex;
} else {
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
} else if (document.selection && document.body.createTextRange) {
//saves caret position(s)
EditCaretPositioning.saveSelection = function(containerEl) {
var selectedTextRange = document.selection.createRange();
var preSelectionTextRange = document.body.createTextRange();
preSelectionTextRange.moveToElementText(containerEl);
preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
var start = preSelectionTextRange.text.length;
return {
start: start,
end: start + selectedTextRange.text.length
}
};
//restores caret position(s)
EditCaretPositioning.restoreSelection = function(containerEl, savedSel) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(containerEl);
textRange.collapse(true);
textRange.moveEnd("character", savedSel.end);
textRange.moveStart("character", savedSel.start);
textRange.select();
};
}
更新 contentEditable div 组件:
import CaretPositioning from 'EditCaretPositioning'
class Input extends Component {
constructor(props) {
super(props);
this.state = {
//newValue input by user
newValue : undefined,
//stores positions(s) of caret to handle reload after onChange end
caretPosition : {
start : 0,
end : 0
}
}
}
//handler during key press / input
onChangeHandler = event => {
let targetValue = event.currentTarget.textContent;
//save caret position(s), so can restore when component reloads
let savedCaretPosition = CaretPositioning.saveSelection(event.currentTarget);
this.setState({
"newValue": targetValue,
"caretPosition" : savedCaretPosition
}, () => {
//restore caret position(s)
CaretPositioning.restoreSelection(document.getElementById("editable"), this.state.caretPosition);
})
}
//handler when user opens input form
onBlurHandler = event => {
//some code that sends the "newValue" to be saved, and resets state
}
render() {
//determine which value to show in the div
let showValue;
//if there is a new value being input by user, show this value
if (this.state.newValue !== undefined) {
showValue = this.state.newValue;
} else {
//if prop has no value e.g. null or undefined, use "" placeholder
if (this.props.value) {
showValue = this.props.value;
} else {
showValue = "";
}
}
return (
<table>
<tbody>
<td>
<div
id="editable"
contentEditable="true"
suppressContentEditableWarning="true"
onInput={this.onChangeHandler.bind(this)}
onBlur={this.onBlurHandler}
>{showValue}
</div>
</td>
</tbody>
</table>
)
}
}
export default Input;
推荐阅读
- scala - 如何在 Scalatest 中将 MockitoSugar 与 AsyncFunSuite 一起使用?
- c# - 如何在内存数据库中执行“ExecuteSqlRawAsync”
- angular - 部署到服务器以获取路由特定 url 后找不到 Angular 文件
- angular - 通配符路径中的正斜杠
- discord - 让管理员不互相踢
- python - 如何以编程方式将 Kafka 主题加载和流式传输到 PySpark 数据帧
- python - 如何在python中将字符串值替换为模式?
- python - 不间断运行python脚本一个月
- amazon-web-services - 无法创建新的 AWS IAM 角色。出现“超出速率”错误
- oracle - ODI 中的单一计划多次进入