Question

我正在尝试创建一个包含div（contenteditable）的html +（vanilla）javascript页面。用户在div中写入一个单词，并将该单词逐字母（在键入时）与另一个单词进行比较。

让我们假设第二个单词是JAVASCRIPT。如果用户在键入时出错，则使用样式和跨度将错误的字母显示为红色。例如：

＆＃13;

JAVAS<span style="color:red">T</span>R

＆＃13;

问题在于不保留插入符号的位置。我想让用户完全透明效果（他/她可以继续输入，每个错误都标有红色，而正确的字符保持不变）。

有什么建议吗？非常感谢您的帮助！

Answer 1

捷克出局：

＆＃13;

const $c_text = document.querySelector(".checker__inputText");
const $c_word = document.querySelector(".checker__correctWord");

function placeCaretAtEnd(el) {
  el.focus();
  if (
    typeof window.getSelection != "undefined" &&
    typeof document.createRange != "undefined"
  ) {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}

const c__word_split = $c_word.innerText.split("");

const checkWord = val => {
  const newVal = val
    .split("")
    .map((ch, i) => {
      if (ch !== c__word_split[i]) {
        return `<span style="color:red">${ch}</span>`;
      }
      return ch;
    })
    .join("");

  return newVal;
};

$c_text.addEventListener("input", function(e) {
  this.innerHTML = checkWord(this.textContent);
  placeCaretAtEnd(this);
});

＆＃13;

.checker__inputText {
  margin: 10px;
  border: 1px solid #ddd;
}
.checker__correctWord {
  margin: 10px;
}

＆＃13;

<div class="checker__inputText" contenteditable></div>
<div class="checker__correctWord">JAVASCRIPT</div>

＆＃13;

特别感谢How to place cursor at the end of text after replacing HTML with jQuery?

在键入Javascript

1 个答案: