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

I am not sure what you mean by “highlighting” the characters exceeding char_limit. If you want to apply a style to a part of the input text, then it is impossible: styles will apply to the whole input. You can try to simulate an input field with spans and some javascript to listen to the keyboard events. This is explained in this answer to a similar question as yours.

For the notice, indeed, you should not add it every time. it should be in your HTML with css “display:none” and shown and hidden when appropriate.

<div id="test_box">
    <input type="text" id="text_text">
    <div id="notice"> There are limit of character for home page title of this field </div>
</div>

—

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

—

$(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');
            $('#notice').show();

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

});

Here is a JSFiddle with that code.