Limit chars per line in textarea

-2

I have a non-resizeable textarea. I need it to work as follows:

When the user enters text, and they hit 76 characters, they should not be able to type anymore until they hit enter

It should continue to the next line as a new line.

I tried to process it post-submission, to add newlines every 76 chars, but it added too many spaces, and when I trimmed, got rid of required spaces.

What's the fastest, most user friendly way to do this?

<textarea class="edit_note_text"></textarea>

var text = $('.edit_note_text').val();

.edit_note_text{

    overflow-y: auto;

    overflow-x: hidden;

    resize: none;

    font-size: 16px;

    font-family: Courier;

    padding: 8px 8px;

    border-color: #dcdcdc;

    color: #4e4e4e;

    margin: 10px 16px 0px;

    width: 780px;

    height: 160px;

        position: relative;

    box-sizing: border-box;

    -webkit-appearance: textarea;

    background-color: white;

    -webkit-rtl-ordering: logical;

    flex-direction: column;

    outline: none;

        cursor: text;

    white-space: pre-wrap;

    word-wrap: break-word;

    border-width: 1px;

    border-style: solid;

    }

<textarea class="edit_note_text" cols='76'></textarea>

I have tried several ways of fixing this with CSS, but I don't think CSS is the answer. I thought of using Javascript on keyup, but there are ways around that.

edited Nov 20 '18 at 22:44

asked Nov 20 '18 at 21:51

user2430018

114

where's your code? what error you got?

– Alfabravo
Nov 20 '18 at 21:53

add a comment |

-2

I have a non-resizeable textarea. I need it to work as follows:

When the user enters text, and they hit 76 characters, they should not be able to type anymore until they hit enter

It should continue to the next line as a new line.

I tried to process it post-submission, to add newlines every 76 chars, but it added too many spaces, and when I trimmed, got rid of required spaces.

What's the fastest, most user friendly way to do this?

<textarea class="edit_note_text"></textarea>

var text = $('.edit_note_text').val();

.edit_note_text{

    overflow-y: auto;

    overflow-x: hidden;

    resize: none;

    font-size: 16px;

    font-family: Courier;

    padding: 8px 8px;

    border-color: #dcdcdc;

    color: #4e4e4e;

    margin: 10px 16px 0px;

    width: 780px;

    height: 160px;

        position: relative;

    box-sizing: border-box;

    -webkit-appearance: textarea;

    background-color: white;

    -webkit-rtl-ordering: logical;

    flex-direction: column;

    outline: none;

        cursor: text;

    white-space: pre-wrap;

    word-wrap: break-word;

    border-width: 1px;

    border-style: solid;

    }

<textarea class="edit_note_text" cols='76'></textarea>

I have tried several ways of fixing this with CSS, but I don't think CSS is the answer. I thought of using Javascript on keyup, but there are ways around that.

edited Nov 20 '18 at 22:44

asked Nov 20 '18 at 21:51

user2430018

114

where's your code? what error you got?

– Alfabravo
Nov 20 '18 at 21:53

add a comment |

-2

I have a non-resizeable textarea. I need it to work as follows:

When the user enters text, and they hit 76 characters, they should not be able to type anymore until they hit enter

It should continue to the next line as a new line.

I tried to process it post-submission, to add newlines every 76 chars, but it added too many spaces, and when I trimmed, got rid of required spaces.

What's the fastest, most user friendly way to do this?

<textarea class="edit_note_text"></textarea>

var text = $('.edit_note_text').val();

.edit_note_text{

    overflow-y: auto;

    overflow-x: hidden;

    resize: none;

    font-size: 16px;

    font-family: Courier;

    padding: 8px 8px;

    border-color: #dcdcdc;

    color: #4e4e4e;

    margin: 10px 16px 0px;

    width: 780px;

    height: 160px;

        position: relative;

    box-sizing: border-box;

    -webkit-appearance: textarea;

    background-color: white;

    -webkit-rtl-ordering: logical;

    flex-direction: column;

    outline: none;

        cursor: text;

    white-space: pre-wrap;

    word-wrap: break-word;

    border-width: 1px;

    border-style: solid;

    }

<textarea class="edit_note_text" cols='76'></textarea>

I have tried several ways of fixing this with CSS, but I don't think CSS is the answer. I thought of using Javascript on keyup, but there are ways around that.

edited Nov 20 '18 at 22:44

asked Nov 20 '18 at 21:51

user2430018

114

I have a non-resizeable textarea. I need it to work as follows:

When the user enters text, and they hit 76 characters, they should not be able to type anymore until they hit enter

It should continue to the next line as a new line.

I tried to process it post-submission, to add newlines every 76 chars, but it added too many spaces, and when I trimmed, got rid of required spaces.

What's the fastest, most user friendly way to do this?

<textarea class="edit_note_text"></textarea>

var text = $('.edit_note_text').val();

.edit_note_text{

    overflow-y: auto;

    overflow-x: hidden;

    resize: none;

    font-size: 16px;

    font-family: Courier;

    padding: 8px 8px;

    border-color: #dcdcdc;

    color: #4e4e4e;

    margin: 10px 16px 0px;

    width: 780px;

    height: 160px;

        position: relative;

    box-sizing: border-box;

    -webkit-appearance: textarea;

    background-color: white;

    -webkit-rtl-ordering: logical;

    flex-direction: column;

    outline: none;

        cursor: text;

    white-space: pre-wrap;

    word-wrap: break-word;

    border-width: 1px;

    border-style: solid;

    }

<textarea class="edit_note_text" cols='76'></textarea>

I have tried several ways of fixing this with CSS, but I don't think CSS is the answer. I thought of using Javascript on keyup, but there are ways around that.

var text = $('.edit_note_text').val();

.edit_note_text{

    overflow-y: auto;

    overflow-x: hidden;

    resize: none;

    font-size: 16px;

    font-family: Courier;

    padding: 8px 8px;

    border-color: #dcdcdc;

    color: #4e4e4e;

    margin: 10px 16px 0px;

    width: 780px;

    height: 160px;

        position: relative;

    box-sizing: border-box;

    -webkit-appearance: textarea;

    background-color: white;

    -webkit-rtl-ordering: logical;

    flex-direction: column;

    outline: none;

        cursor: text;

    white-space: pre-wrap;

    word-wrap: break-word;

    border-width: 1px;

    border-style: solid;

    }

<textarea class="edit_note_text" cols='76'></textarea>

var text = $('.edit_note_text').val();

.edit_note_text{

    overflow-y: auto;

    overflow-x: hidden;

    resize: none;

    font-size: 16px;

    font-family: Courier;

    padding: 8px 8px;

    border-color: #dcdcdc;

    color: #4e4e4e;

    margin: 10px 16px 0px;

    width: 780px;

    height: 160px;

        position: relative;

    box-sizing: border-box;

    -webkit-appearance: textarea;

    background-color: white;

    -webkit-rtl-ordering: logical;

    flex-direction: column;

    outline: none;

        cursor: text;

    white-space: pre-wrap;

    word-wrap: break-word;

    border-width: 1px;

    border-style: solid;

    }

<textarea class="edit_note_text" cols='76'></textarea>

javascript html css

edited Nov 20 '18 at 22:44

asked Nov 20 '18 at 21:51

user2430018

114

edited Nov 20 '18 at 22:44

asked Nov 20 '18 at 21:51

user2430018

114

edited Nov 20 '18 at 22:44

asked Nov 20 '18 at 21:51

user2430018

114

asked Nov 20 '18 at 21:51

user2430018

114

asked Nov 20 '18 at 21:51

user2430018

114

where's your code? what error you got?

– Alfabravo
Nov 20 '18 at 21:53

add a comment |

where's your code? what error you got?

– Alfabravo
Nov 20 '18 at 21:53

where's your code? what error you got?

– Alfabravo
Nov 20 '18 at 21:53

add a comment |

2 Answers
2

active

oldest

votes

Use keydown combined with preventDefault. When the user presses a key inside of your textarea, get the value property of the textarea. Use .split("n") to split it into individual lines, and run event.preventDefault() if any have a length greater than 76:

function keyDown(e) {

    var text = document.getElementById("text");

    var lines = text.value.split("n");

    var line = text.value.substring(0, text.selectionStart).split("n").length - 1;

    if (lines[line].length >= 76 && !(e.keyCode == 13 || e.keyCode == 8))

        e.preventDefault();

}

<textarea id="text" onkeydown="keyDown(event)"></textarea>

edited Nov 20 '18 at 22:10

answered Nov 20 '18 at 22:02

Redwolf Programs

251311

Please note that you can copy/paste text into the textbox and it will be longer. Trying to find a solution.

– Redwolf Programs
Nov 20 '18 at 22:12

add a comment |

you can try this

<textarea id="myarea" cols="76" wrap="hard"></textarea>

this will only allow 76 chars per line

answered Nov 21 '18 at 7:55

Yash Soni

47510

This continues text on the next line, but when it saves, is actually longer than 76 char per line - because it isn't a real newline.

– user2430018
Nov 21 '18 at 15:14

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402131%2flimit-chars-per-line-in-textarea%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

function keyDown(e) {

    var text = document.getElementById("text");

    var lines = text.value.split("n");

    var line = text.value.substring(0, text.selectionStart).split("n").length - 1;

    if (lines[line].length >= 76 && !(e.keyCode == 13 || e.keyCode == 8))

        e.preventDefault();

}

<textarea id="text" onkeydown="keyDown(event)"></textarea>

edited Nov 20 '18 at 22:10

answered Nov 20 '18 at 22:02

Redwolf Programs

251311

Please note that you can copy/paste text into the textbox and it will be longer. Trying to find a solution.

– Redwolf Programs
Nov 20 '18 at 22:12

add a comment |

function keyDown(e) {

    var text = document.getElementById("text");

    var lines = text.value.split("n");

    var line = text.value.substring(0, text.selectionStart).split("n").length - 1;

    if (lines[line].length >= 76 && !(e.keyCode == 13 || e.keyCode == 8))

        e.preventDefault();

}

<textarea id="text" onkeydown="keyDown(event)"></textarea>

edited Nov 20 '18 at 22:10

answered Nov 20 '18 at 22:02

Redwolf Programs

251311

Please note that you can copy/paste text into the textbox and it will be longer. Trying to find a solution.

– Redwolf Programs
Nov 20 '18 at 22:12

add a comment |

function keyDown(e) {

    var text = document.getElementById("text");

    var lines = text.value.split("n");

    var line = text.value.substring(0, text.selectionStart).split("n").length - 1;

    if (lines[line].length >= 76 && !(e.keyCode == 13 || e.keyCode == 8))

        e.preventDefault();

}

<textarea id="text" onkeydown="keyDown(event)"></textarea>

edited Nov 20 '18 at 22:10

answered Nov 20 '18 at 22:02

Redwolf Programs

251311

function keyDown(e) {

    var text = document.getElementById("text");

    var lines = text.value.split("n");

    var line = text.value.substring(0, text.selectionStart).split("n").length - 1;

    if (lines[line].length >= 76 && !(e.keyCode == 13 || e.keyCode == 8))

        e.preventDefault();

}

<textarea id="text" onkeydown="keyDown(event)"></textarea>

function keyDown(e) {

    var text = document.getElementById("text");

    var lines = text.value.split("n");

    var line = text.value.substring(0, text.selectionStart).split("n").length - 1;

    if (lines[line].length >= 76 && !(e.keyCode == 13 || e.keyCode == 8))

        e.preventDefault();

}

<textarea id="text" onkeydown="keyDown(event)"></textarea>

function keyDown(e) {

    var text = document.getElementById("text");

    var lines = text.value.split("n");

    var line = text.value.substring(0, text.selectionStart).split("n").length - 1;

    if (lines[line].length >= 76 && !(e.keyCode == 13 || e.keyCode == 8))

        e.preventDefault();

}

<textarea id="text" onkeydown="keyDown(event)"></textarea>

edited Nov 20 '18 at 22:10

answered Nov 20 '18 at 22:02

Redwolf Programs

251311

edited Nov 20 '18 at 22:10

answered Nov 20 '18 at 22:02

Redwolf Programs

251311

answered Nov 20 '18 at 22:02

Redwolf Programs

251311

answered Nov 20 '18 at 22:02

Redwolf Programs

251311

Please note that you can copy/paste text into the textbox and it will be longer. Trying to find a solution.

– Redwolf Programs
Nov 20 '18 at 22:12

add a comment |

Please note that you can copy/paste text into the textbox and it will be longer. Trying to find a solution.

– Redwolf Programs
Nov 20 '18 at 22:12

Please note that you can copy/paste text into the textbox and it will be longer. Trying to find a solution.

– Redwolf Programs
Nov 20 '18 at 22:12

add a comment |

you can try this

<textarea id="myarea" cols="76" wrap="hard"></textarea>

this will only allow 76 chars per line

answered Nov 21 '18 at 7:55

Yash Soni

47510

This continues text on the next line, but when it saves, is actually longer than 76 char per line - because it isn't a real newline.

– user2430018
Nov 21 '18 at 15:14

add a comment |

you can try this

<textarea id="myarea" cols="76" wrap="hard"></textarea>

this will only allow 76 chars per line

answered Nov 21 '18 at 7:55

Yash Soni

47510

This continues text on the next line, but when it saves, is actually longer than 76 char per line - because it isn't a real newline.

– user2430018
Nov 21 '18 at 15:14

add a comment |

you can try this

<textarea id="myarea" cols="76" wrap="hard"></textarea>

this will only allow 76 chars per line

answered Nov 21 '18 at 7:55

Yash Soni

47510

you can try this

<textarea id="myarea" cols="76" wrap="hard"></textarea>

this will only allow 76 chars per line

answered Nov 21 '18 at 7:55

Yash Soni

47510

answered Nov 21 '18 at 7:55

Yash Soni

47510

answered Nov 21 '18 at 7:55

Yash Soni

47510

answered Nov 21 '18 at 7:55

Yash Soni

47510

This continues text on the next line, but when it saves, is actually longer than 76 char per line - because it isn't a real newline.

– user2430018
Nov 21 '18 at 15:14

add a comment |

This continues text on the next line, but when it saves, is actually longer than 76 char per line - because it isn't a real newline.

– user2430018
Nov 21 '18 at 15:14

This continues text on the next line, but when it saves, is actually longer than 76 char per line - because it isn't a real newline.

– user2430018
Nov 21 '18 at 15:14

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu