Stop user from typing in a textarea after reaching row limit?

Question

I am working on a project where the the total amount of rows in a textarea will be equal to the offsetHeight of another element divided by 24. When setting the total amount of rows the user cannot create more rows by pressing enter, however when any text that is written overflows the width of the textarea, it will still create a new line.

Since the height of the div that the textarea inherits is resizable, it is also unknown. This means that i cannot implicitly set a character count limit. Since the textarea also gets its height from the other div, i cannot set a fixed height and hide any overflow.

How can i stop the user from creating new rows by typing too much text?

So far i've attempted to limit the amount of lines in the textarea. My program currently does not allow the user to manually create any more lines after reaching the last row by pressing enter, but the user can still create more rows by simply writing more text.

Here is my code:

HTML

<div id="container">
  <div id="resizable-div">
    <div></div>
  </div>
  <div class="text-content">
    <textarea id="text-area"></textarea>
  </div>
</div>

Javascript

let resizeDiv = document.getElementById('resizable-div');
let textArea = document.getElementById('text-area'); 

function changeHeight(){
  if (resizeDiv.offsetHeight % 24 != 0) {
    resizeDiv.style.height = `${(Math.round(resizeDiv.offsetHeight / 24) * 24) - 48}px` // Sets height to correspond to line-height and then removes 48px to compensate for paddidng
  }              
}
  
resizeDiv.addEventListener('mouseup', (event) => {
  changeHeight();
})


textArea.addEventListener("input", function() {
  let maxLines = Math.floor(resizeDiv.offsetHeight / 24)
  let lines = textArea.value.split("\n")
  if (lines.length >= maxLines) {
    textArea.value = lines.slice(0, maxLines).join("\n")
    event.preventDefault();
  }
})

And a codepen: https://codepen.io/pumpchief/pen/WNKgZmm

score 0 · Answer 1 · answered Jan 31 '23 at 02:24

The solution in this JsFiddle looks applicable http://jsfiddle.net/AmFnA/9/

JAVASCRIPT:

function textarealimit(textarea, rows, chars, rowsleft_id, charsleft_id) {
    var newValue;
    var valueSegments = textarea.value.split('\n');
    if(rows != undefined && valueSegments.length > rows) { // too many rows
        newValue = valueSegments.slice(0, rows).join("\n");
    }
    if(chars != undefined && textarea.value.length > chars) { // too many chars
        if(newValue != undefined) 
            newValue = newValue.substring(0, chars);
        else
            newValue = textarea.value.substring(0, chars);
    }
    if(newValue != undefined) textarea.value = newValue;

    if(rowsleft_id != undefined) {
        if(textarea.value == "") document.getElementById(rowsleft_id).innerHTML = rows;
        else if(rows - valueSegments.length >= 0) document.getElementById(rowsleft_id).innerHTML = rows - valueSegments.length;
    }
    if(charsleft_id != undefined) {
        if(chars != undefined) document.getElementById(charsleft_id).innerHTML = chars - textarea.value.length;
    }
}
HTML:

<textarea onkeydown="textarealimit(this, 4, 43, 'textarea_rowsleft', 'textarea_charsleft');" 
onkeyup="textarealimit(this, 4, 43, 'textarea_rowsleft', 'textarea_charsleft');" 
onpaste="textarealimit(this, 4, 43, 'textarea_rowsleft', 'textarea_charsleft');" 
rows="4" style="overflow: hidden; resize: none;">
</textarea>
<div>
    Rows left: <span id="textarea_rowsleft">4</span>
    Characters left: <span id="textarea_charsleft">43</span>
</div>

See: How do you restrict the number of rows in a <textarea>?

Other applicable method (?)"limit-rows-in-html5-textarea": https://github.com/c4710n/textarea-max-rows

Stop user from typing in a textarea after reaching row limit?

1 Answers1