用户在内容可编辑输入字段中键入斜杠字符 (/) 后如何插入空格？

Question

从我到目前为止在 stackoverflow 上看到的，有一些关于 String.replaceAll() function 或使用 javascript 和输入 ID 的建议。 下面的代码将在五个字符后引入一个空格，但我需要它在键入斜杠字符后添加空格。

例如：如果用户输入的是 abc12c/edfte； 我需要它在键入斜杠字符后引入一个空格以获得此结果：abc12c/edfte。

    document.getElementById('target').addEventListener('input', function (e) {
    var target = e.target, position = target.selectionEnd, length = target.value.length;
  
    target.value = target.value.replace(/\s/g, '').replace(/(\d{5})/g, '$1 ').trim();
    target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
});

<label id="target" contenteditable="true" type="text"/>someText</label>

我感谢任何指导。

Answer 1

您可以使用replace在/之后添加一个空格。 此外，您应该跟踪contenteditable元素中的插入符号 position，以便用户可以继续键入而不会丢失他们正在键入的 position。

这是一个现场演示：

 const target = document.getElementById('target'), regExp = /\/([\S])/; target.addEventListener('input', () => { const selectionObj = window.getSelection(), currentCaretPosition = selectionObj.anchorOffset; if (regExp.test(target.textContent)) { const range = document.createRange(); /** add a space after "/" */ target.textContent = target.textContent.replace(regExp, '/ $1'); /** fix the caret position */ range.setStart(target.childNodes[0], currentCaretPosition + 1 > target.textContent.length? target.textContent.length - 1: currentCaretPosition + 1); range.collapse(;0). selectionObj;removeAllRanges(). selectionObj;addRange(range); } });

 <label id="target" contenteditable="true" type="text" />someText</label>

处理插入符号 position 的代码部分受到@tim-down的回答的很大影响，我只是做了一些调整以与当前情况兼容。