Question

Is there a way to limit the characters per line in a textarea? For instance, in lines 1-3 of the textarea, only 20 characters are allowed but the lines after that, 50 characters are allowed.

The way the textarea is constructed, I can only limit approximately the same amount of characters per line by changing the width (because it’s in a shape of a box). I am not sure if limiting a different amount of characters per line is possible.

I am asking this because I have an image on top of the textarea and when the user types in something, the text goes underneath the part where the image is absolutely positioned. Unless it is possible to float an image inside a text area? 😕

Answer 1

Tips on solving this using JavaScript

Of course you can, if you use JavaScript. See the following snippet using jQuery:

var result = jQuery('#result');
var my_textarea = jQuery('#mytext');
my_textarea.on('keyup', function(event){
    var el = jQuery(this);
    var lines = el.val().split('\n').length;
    var chars = el.val().split('').filter(function(v){
        return v != '\n';
    }).length;
    result.html('You have ' + lines + ' lines and ' + chars + ' chars');
});

(demonstration is here: http://jsfiddle.net/tadeck/8krTv/1/)

It counts the number of lines & the number of character, there is no problem in counting characters for each line and disabling ability to add more characters in specific line.

Image positioned within textarea

You said some positioning of an image inside textarea could solve the problem. Of course you can do this too – one of the solutions is to make an image a background for the textarea, and then correct padding from the side you want it to appear, so the text does not overflow the image.