Change background of textarea with limit

Question

I have a textarea .txt which has a limit of 250 char.

I want the background of text getting red if reached >250 char. Just like twitter. But i dont wanna use contenteditable div as used by twitter for many reasons.

$('.txt').keyup(function{
  if($(this).val().length>250){
  //limit reached now change bg of >250 chars.
}});

I only want to change the background of text after 250 characters & not the whole textarea.

You don't have a choice; with a `textarea` it's all or nothing. — David Thomas, May 11 '14 at 19:10
What you are referring to @DavidThomas? The background color can be changed on a `textarea`. — Brandon White, May 11 '14 at 19:13
@BrandonWhite yes but not the background color of the *text*. — display-name-is-missing, May 11 '14 at 19:13
Yes, @Brandon, it can. I never said it *couldn't*. What I *said* was simply that, with a `textarea` element it's the *entirety* of that element that's affected by any change, not a portion of it. — David Thomas, May 11 '14 at 19:14
@DavidThomas thanks for the reply. See above for the reasoning of my comment. — Brandon White, May 11 '14 at 19:17
How can we change a portion of it ?or do the same by some other means? @Brandon ? — HackerManiac, May 11 '14 at 19:17
@user3187838 I've read that the JS needed for what you want to do is pretty complex. You sure you don't want to go with `contenteditable`? — display-name-is-missing, May 11 '14 at 19:32
Yes. Can u givevan idea. I can handle any level of complexity. — HackerManiac, May 11 '14 at 19:36

score 1 · Accepted Answer · edited May 23 '17 at 11:44

You can wrap the "user inserted text" in a element span class="classError" with the style you want, such as:

$(document).ready(function(){

  var max_length = 25;

  $("#editable").on("keyup", function(){


    if( $(this).text().length > max_length){

      $(this).css("color", "red");

      $("#editable").html('<span class="error">' + $("#editable").text() + '</span>');


    } else {

      $(this).css("color", "");     

    }

  });

});

you can find this example jsbin here (http://jsbin.com/nehac/1/) it's just the basic concept needs improvement, but I'm pretty sure you can do the rest!

You'll then have to solve the cursor position, there's a few solutions, like this one (How to move cursor to end of contenteditable entity)

Hope this helps!

Change background of textarea with limit

1 Answers1