Изменить цвет последней буквы в строке с помощью 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> тег, который одновременно обновляет скрытое поле. Это даст вам бесконечную гибкость в том, что вы можете стилизовать.