使用javascript更改字符串中最后一个字母的颜色

Question

我正在开发一个小型拼写程序，我需要更改拼写错误字母的颜色。这是我尝试过的。此代码检测到拼写错误，但不会更改拼写错误字母的颜色：

$("#inputfield").keyup(function () {
    var inputstring = document.getElementById("inputfield").value;
    var inputlng = inputstring.length;

    if (stavningsord.indexOf(inputstring)!=0) {
        // alert ("Misspell");
        var html = document.getElementById("inputfield");
        var containedhtml = html.innerHTML;
        html.innerHTML = containedhtml.substr(0, containedhtml.length-1) + "<span style='color: red'>" + html.innerHTML.substr(-1) + "</span>";
        // $("#inputfield").html = (inputstring.substr(0, inputstring.length-1) + "<span style='color: red'>" + $(this).html().substr(-1) + "</span>");
        alert ("Misspell");
    }

});

感谢任何帮助！

Answer 1

遗憾的是，<input> 标签是一个系统控件，您不能（轻松/明智地）在其中设置字母样式。

如果您希望坚持这一点，您可能希望将<input> 更改为隐藏字段，并使用JS/CSS 构建一个同时更新隐藏字段的“假”<input> 标签。这将为您的风格提供无限的灵活性。