CODEWITHSUNDEEP
javascriptjqueryhtmlcss
catandmouse
catandmouse

Reputation: 11809

Is there a way to limit the characters per line in a textarea (javascript/jQuery)?

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? :?

Upvotes: 3

Views: 2921

Answers (2)

Ady Ngom
Ady Ngom

Reputation: 111

ok what are you trying to achieve do you want the text to be on top of the image or do you want it to the left of the image, an absolutely position element breaks out the natural flow and places itself on the closest parent container grid with relative positioning. If possible post a snippet of html and css on jsfiddle.net Cheers.

Upvotes: 0

Tadeck
Tadeck

Reputation: 137310

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.

Upvotes: 4

Related Questions