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.

Can you just use the `mexlength` property of the textbox? `` That will force the issue without a need for the script. — jwatts1980, Oct 18 '12 at 15:42
i cant do that, cuz on my site user can add some content and every content has title, but on the home page i need to show trimmed title and limit is 5 atm, but this is just example(limit will be set later), so i want to allow the user to understand what this title will be trimmed if they promote it on home page. — Petro Popelyshko, Oct 18 '12 at 15:45
if you dont mind using a jquery plugin: [jQuery Caret Plugin](http://www.jquery-plugin.buss.hk/my-plugins/jquery-caret-plugin), is capable of `highlight text by specifying starting position, ending position or length of selection in a "text input box" (input type="text") or "text area" (textarea)` — RASG, Oct 18 '12 at 16:10

score 2 · Answer 1 · answered Oct 18 '12 at 16:01

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.

about user-friendly u are right, your solution is interesting. thanks for answer — Petro Popelyshko, Oct 18 '12 at 16:10

score 0 · Accepted Answer · edited May 23 '17 at 12:18

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.

yes i wanted to apply style to a part of the input, did not know thats impossible as js, about notice thanks for answer! gonna try to simulate that field. thanks — Petro Popelyshko, Oct 18 '12 at 15:52

Highlight the sub text depending on the number of characters

2 Answers2