textarea to output p - max length or height

Question

I have a textarea text box and a viewable p area which displays the input.
I am trying to control the the amount of text input based on p height or textarea max string length.
There are 2 issues im facing:

1) Once p goes beyond max height or textarea gets max length, textarea should stop accepting input.

2) After the max from above happens, pressing backspace or delete in textarea does not change p.

here is my fiddle

edit: this helps with part 1 but had to use keydown (textarea stops accepting input), but then hitting backspace still does not reflect on p

    if (this.value.length == max || height>50) {
            e.preventDefault();
    } else if (this.value.length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
    }else{
        recField.html(this.value);
        height = recField.height()
        $('.temp').text(height);
    }

after more tests, keydown has issues, p does not reflect input from textarea like keyup does.
: (
back to square 1

Answer 1

I've created this fiddle for you, which also works in IE7 (or at least the compatibility mode in IE10): http://jsfiddle.net/jy4qK/11/

Unfortunately it became a bit messy when I tweaked it to work in IE7, such as switching between two functions for onkeydown.

 

Edit:

A quick note about your own update regarding copying text on onkeydown:

The reason why the value of textarea is not copied to the paragraph on onkeydown, is because the keycode has not yet been sent to the element. This happens on onkeypress in some browsers (unreliable), and on onkeyup or oninput (faster than onkeyup, which is only handled every 20 ms, but is a part of HTML5 and therefore not an option if you wish to support IE < 10).

At least if my memory serves me correctly..