Change color of last letter in a string with javascript

Question

I am developing a small spelling program and I will need to change the color of the misspelled letter. This is what I have tried. This code detects a misspelling but it does not change the color of the misspelled letter:

$("#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");
    }

});

Any help is appreciated!

Possible duplicate of [Is there a way to style part of an input field's value?](http://stackoverflow.com/questions/3121683/is-there-a-way-to-style-part-of-an-input-fields-value) — Stephan, Nov 18 '15 at 09:34

score 1 · Answer 1 · answered Nov 18 '15 at 09:23

Sadly, as an <input> tag is a system control you can't (easily/sanely) style a letter inside it.

If you wish to persevere with this you'd want to change the <input> to a hidden field and use JS/CSS to build a "fake" <input> tag that simultaneously updates the hidden field. That will give you infinite flexibility in what you can style.

Change color of last letter in a string with javascript

1 Answers1