Javascript 范围在 Firefox 上丢失空格？

Question

我正在尝试计算字符数并将超过一定限制的字符包装在 <span> 中，我将其设置为红色。

除了将插入符移动到末尾的函数外，代码大部分工作正常，在 Firefox 上，我在那里创建的范围丢失了所有空格，因此 'abcd abcd' 变为 'abcdabcd'

函数代码如下：

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
        && typeof document.createRange != "undefined") {
        // Modern browsers
        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") {
        // IE
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

有没有人遇到过这个问题并找到了解决方案？

Answer 1

Firefox 正在忽略 HTML 中的白色 spaces。您必须修改它以将 space 个字符替换为 html 个转义字符。代替代码

inputText.substring(0,maxCharacter)

你应该做

inputText.substring(0,maxCharacter).replace(/ /g, ' ')

同样代替代码

inputText.substring(maxCharacter)

你应该做

inputText.substring(maxCharacter).replace(/ /g, ' ')

这将解决它。希望它也适用于所有其他浏览器。

改笔：http://codepen.io/anon/pen/GgXBjp

Javascript 范围在 Firefox 上丢失空格？

Javascript range loses whitespace on Firefox?

javascript

css

jquery

range