CODEWITHSUNDEEP
jqueryhtmlcss
Kārlis Janisels
Kārlis Janisels

Reputation: 1295

How to set max-rows to textarea input tag?

I am building html+css (pure, no BS) chatbox window. I am having serious problems with input for message.

What I am looking for is input where user can write his message. That would be either input on textarea tag. I want efect similar to what FB does when line is full another line starts. That would limit my choices to textarea. I need submit button and also submit on enter. So I use it in form tags.

<form>
<textarea></textarea>
<input type="submit" value="Send message">
</form>

What I do not undestand is how I should format textarea?

  1. How to start from one line and move up to some max-lines value (I want to allow only for lines) and if max-lines is reached then start overflowing message?
  2. How to detect shift+enter to create a new line?

Upvotes: 12

Views: 63295

Answers (5)

Farid
Farid

Reputation: 463

You can handle the lines of textarea with the below code I've written. This code will increase the number of rows when the textarea goes to next line and it has limit for the number of rows

<textarea
   id="my-textarea"
   rows="1"
/>

<script>
function isScrollable(el) {
  return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
}
const MAX_ROW = 4
const textarea = document.getElementById('my-textarea')
textarea.addEventListener('input', (e) => {
  const el = e.target;
  if (isScrollable(el) && MAX_ROW > el.rows) {
    el.rows = el.rows + 1;
  }
  if (!el.value) {
    el.rows = 1;
  }
})
</script>

Upvotes: 0

Thura Aung
Thura Aung

Reputation: 93

To cover the backspace problem answered by @Rana Ghosh, I updated the source code as follow. To change the max-rows, you just change the textarea's rows attribute.

html

<textarea name="text" class="form-control" rows="2" onkeydown="return limitLines(this, event)"></textarea>

js

<script type="text/javascript">
    function limitLines(obj, e) {
      let keynum, lines = obj.value.split('\n').length;

      // IE
      if(window.event) {
        keynum = e.keyCode;
      // Netscape/Firefox/Opera
      } else if(e.which) {
        keynum = e.which;
      }

      if(keynum == 13 && lines == obj.rows) {
        return false;
      }
    }
</script>

Upvotes: 1

crazy-coding
crazy-coding

Reputation: 66

<textarea rows="4" onkeydown="limitLines(this, 30)"></textarea>
<script type="text/javascript">
  function limitLines(obj, limit) {
    var values = obj.value.replace(/\r\n/g,"\n").split("\n")
    if (values.length > limit) {
      obj.value = values.slice(0, limit).join("\n")
    }
  }
</script>

You can use this code for limit lines of textarea.

Upvotes: 1

Rana Ghosh
Rana Ghosh

Reputation: 4674

This might help (probably be best using jQuery, onDomReady and unobtrusively adding the keydown event to the textarea) :

<html>
  <head><title>Test</title></head>
  <body>
    <script type="text/javascript">
      var keynum, lines = 1;

      function limitLines(obj, e) {
        // IE
        if(window.event) {
          keynum = e.keyCode;
        // Netscape/Firefox/Opera
        } else if(e.which) {
          keynum = e.which;
        }

        if(keynum == 13) {
          if(lines == obj.rows) {
            return false;
          }else{
            lines++;
          }
        }
      }
      </script>
    <textarea rows="4" onkeydown="return limitLines(this, event)"></textarea>
  </body>
</html>

*Edit - explanation: It catches the keypress if the ENTER key is pressed and just doesn't add a new line if the lines in the textarea are the same number as the rows of the textarea. Else it increments the number of lines.Use it as your need.

Upvotes: 2

Ganesh Radhakrishnan
Ganesh Radhakrishnan

Reputation: 350

Try this code

<form>
<textarea rows="10" cols="10" maxlength="200" style="resize:none;"></textarea>
<input type="submit" value="Send message">
</form>

$(document).ready(function() {
    $('textarea').live("keypress", function(e) {
        if (e.keyCode == 13) 
        {
            $('form').submit();
        }
    });
});

Upvotes: 6

Related Questions