Highlight the sub text depending on the number of characters

Question

Basic idea is to highlight the characters after a specified length value in input, and also show a notice message.

Here we go:

<div id="test_box">
   <input type="text" id="text_text">
</div>

css:

 #notice {
    width: 140px;
    height: 40px;
    background-color: black;   

    }
 #test_box {
       width: 400px;
       height: 400px;

 }

and jQuery code:

$(document).ready(function() {
        var length = $('#text_text').val().length; 
        var char_limit = 5;       
        $('#text_text').bind('keyup', function() {
            new_length = $('#text_text').val().length;
            if (new_length > char_limit) {
              $('#text_text').css('color','red');
                $('#test_box').append('<div id="notice"> There are limit of character for home page title of this field </div>'); // wrong too much divs :/

            } else {
               $('#text_text').css('color', 'black');
               $('#notice').hide(); //wrong             
            }
        });
 });

At the moment characters highlighted after char_limit is exceeded, what i need is to highlight only those who go after char_limit. And also notice block is adding every time if i input character, i think i should create that div manually or maybe not and appear it somehow when char_limit is exceeded.

Answer 1

It is not really impossible highlight some part of the text as you can highlight it by selection.

Check this out: http://jsfiddle.net/9BrpD/3/

$(document).ready(function(){
    var input = $('#text_text');
    var warning = $('#warning');
    input.on('keyup', function(){
       var val = $(this).val();
        if ( val.length > 3 ) {
            warning.html('hello').css('display', 'block');
            l = val.length
            var input = document.getElementById("text_text");
            input.setSelectionRange(l-3, l);
            input.focus();
        }
        else {
             warning.css('display', 'none');
        }
    });   

});​

It also solves the issue you had with your repeated divs. However, I don't find this solution very user-friendly. You could try to move the focus outside of the input field but still, not entirely satisfactory.