javascript - 更改 DOM 文本节点的内容

Question

假设我有以下 HTML：

<div>Some text</div>

每次用户点击退格键时，我都想从文本中删除最后一个字符。有没有办法从文本节点中实际删除一个字符？还是我必须做类似的事情obj.innerText = 'Some tex'（即自己修剪最后一个字符并替换整个东西）。

Answer 1

var div = document.getElementById('my-div');
document.addEventListener('keydown', 
    function(e) {
        if (e.which === 8) {
            div.textContent = div.textContent.substring(0, div.textContent.length - 1);
        }
    }, false);

您可能还想支持 IE8。在这种情况下，请使用 document.attachEvent() 和 div.innerText。

Answer 2

我能想到的最好的方法是使用substringStrings 的方法。

var s = obj.innerText

// Then On backspace event listener
s = s.substring(0, s.length - 1) // returns s without the last character in the original string.

obj.innerTezt(s) // set the inner HTML back to s

编辑：感谢乔纳森，丹尼斯对这个答案的更正！

Answer 3

// Get the element
var el = document.queryString("...")

// Get the text contents
var text = el.firstChild
if (text.nodeType === Node.TEXT_NODE) {
   // Delete the last character
   text.deleteData(text.length - 1, 1)
}

有关详细信息，请参阅CharacterData DOM 接口deleteData