Textarea Limit characters per line Jquery or Javascript

Question

Possible Duplicate:
How to limit number of characters per line in text area to a fixed value.

hello Friends,

I have a textarea field in my view.

I need to set per line 72 characters length.

that is user is entering more than 72 chracter per line I need go to next line.

How to set these limits using jquery or javascript?

Thanks

Solution 1

This is not standard, but it works in many browsers, test it.

http://www.htmlcodetutorial.com/forms/_TEXTAREA_WRAP.html

<TEXTAREA NAME="HARD" COLS="72" ROWS="5" WRAP="HARD">

Setting wrap to hard makes it send new lines to the server. Setting it to soft only breaks it visually.

Solution 2

No need to use javascript for this. There is a HTML attribute built into the <textarea> tag.

See some documentation here.

example for your use

<TEXTAREA NAME="HARD" COLS=72 ROWS=5 WRAP=HARD></TEXTAREA>

Using a HARD Wrap actually sets carriage returns when the line is wrapped.

Solution 3

I may be a bit late posting this answer, but this is best done with javaScript to ensure browser compatibility. With jQuery we can do

var count= 1;
var chars= 3;
$('#mytext').keydown(function() {
        var v = $(this).val();
        var vl = v.replace(/(\r\n|\n|\r)/gm,"").length;   
    if (parseInt(vl/count) == chars)
    {
        $(this).val(v + '\n');
        count++;
    }
});

Check working example at http://jsfiddle.net/ZWVad/2/

Comments

[Felix Kling]

Is this the same question as this one? stackoverflow.com/q/5236213/218196 Do you have two accounts?

[Ruan Mendes]

Look awfully close, posted at the same time... kumar?

[PHeiberg]

Is wrap="hard" supported by all modern browsers? Back in the day (<2006) it was just IE and the wrap property violated the HTML 4 spec.

[Stephen P]

@PHeiberg wrap and cols are both part of the HTML 5 Spec and should be supported everywhere.

[jondavidjohn]

right, it's offically non-standard in HTML 4, but have seen confirmation of support for Webkit Variants, FF, and IE

[PHeiberg]

Thanks, then I can continue using it in my apps without worrying :-)

[Ruan Mendes]

@PHeiberg: I would confirm it for myself for your target browsers, and write a unit test so you know if support is removed in the future since wrap is not officially supported.

[Hussein]

Check working example at jsfiddle.net/ZWVad/2

[Noah Harrison]

This only enforces line breaks if the user enters text continuously. It doesn't work if the user backs up and edits previous text.

[Ruan Mendes]

@orion it is working for at least 5 people who have upvoted this answer. Care to explain a little more about what's not working? What browser? What's actually happening instead? What did you expect to happen?Maybe a link to http:/jsfiddle.net with the not working code?

[Pramod S. Nikam]

Sure.. I will actually trying solution to reduce each line to some extent. Lengthwise.

[mila]

In Chome, at least, it just wraps the text where the text area ends width-wise. What if my textarea needs to be of some width but the text limit goes beyond some width?

[Ruan Mendes]

@mila Not sure how it makes sense to have the text display outside the textarea.

[mila]

@JuanMendes it does, when on one hand you have design constraints but on the other hand you want to show the user how the text will be cropped for other purposes (we use the text in the text area for video subtitles so it is very important that the user sees where each of his rows will be cut).

[Ruan Mendes]

@mila when the user wants to see it differently, use something other than the textarea. Please create a new question to keep this post slim.

[Benoit]

adding to the problem with the paste, if a user enter text fast with chrome, some time the text can be more. Chrome will skip some events when it can't hanle it without laggnig. This will not appen with IE.

[Guy Schalnat]

Six years later, it is now standard and supported