Limit chars per line in textarea
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
OR
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.
javascript html css
asked Nov 20 at 21:51
user2430018
114
add a comment |
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
OR
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.
javascript html css
asked Nov 20 at 21:51
user2430018
114
where's your code? what error you got?
– Alfabravo
Nov 20 at 21:53
add a comment |
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
OR
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.
javascript html css
asked Nov 20 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
OR
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
javascript html css
asked Nov 20 at 21:51
user2430018
114
asked Nov 20 at 21:51
user2430018
114
edited Nov 20 at 22:44
asked Nov 20 at 21:51
user2430018
114
asked Nov 20 at 21:51
user2430018
114
asked Nov 20 at 21:51
user2430018
114
114
where's your code? what error you got?
– Alfabravo
Nov 20 at 21:53
add a comment |
where's your code? what error you got?
– Alfabravo
Nov 20 at 21:53
where's your code? what error you got?
– Alfabravo
Nov 20 at 21:53
where's your code? what error you got?
– Alfabravo
Nov 20 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>answered Nov 20 at 22:02
Redwolf Programs
243210
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 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 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 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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
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>answered Nov 20 at 22:02
Redwolf Programs
243210
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 at 22:12
add a comment |
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>answered Nov 20 at 22:02
Redwolf Programs
243210
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 at 22:12
add a comment |
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>answered Nov 20 at 22:02
Redwolf Programs
243210
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>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>answered Nov 20 at 22:02
Redwolf Programs
243210
edited Nov 20 at 22:10
answered Nov 20 at 22:02
Redwolf Programs
243210
answered Nov 20 at 22:02
Redwolf Programs
243210
answered Nov 20 at 22:02
Redwolf Programs
243210
243210
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 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 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 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 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 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 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 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 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 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 at 7:55
Yash Soni
47510
answered Nov 21 at 7:55
Yash Soni
47510
answered Nov 21 at 7:55
Yash Soni
47510
answered Nov 21 at 7:55
Yash Soni
47510
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 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 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 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 at 15:14
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
where's your code? what error you got?
– Alfabravo
Nov 20 at 21:53