Checking length of each row of text area using jQuery

I need to create text area that would have indication if any of the rows exceed limits.

Any ideas how to easily do that? Is it possible to put some background color only for that row?

Note

Example below looks like a select list, but normally there are long sentences. We just need to check that does that se开发者_运维技巧ntence exceed limits we have given and if yes then let's give some feedback. User can still continue editing.

---

Textareas are pretty dumb, so highlighting isn't immediately possible.

You'd need to write a keyboard event handler and simulate a textarea in a DIV. You'd need to interpret keystrokes and cursor movements and keep track of the current cursor position, as well as wrapping each line in a DIV or SPAN to allow you to change the style to highlight a particular item.

I've done this type of thing by hiding a textarea, which the user is actually entering text into, and interpreting the contents of the textarea and displaying the result in a DIV, much like the SO editor.

On each keystroke you'd need to run your "exceeds" test and change the class on that DIV/SPAN for highlighting.

It's a much more complex problem than you'd imagine.