Set Max characters in textarea base on Textarea height and width

Question

Notes: I tried all questions & answers related to this topic.

I want to limit the number of characters Base on Textarea height and width.. suppose I have set Textarea height :50px and width:60px; so i want to prevent character after completed Textarea .

Notes: Set Max characters by Textarea height and width.

Related Search Links

.textareaClass {
  height: 50px;
  width: 60px;
  resize: none;
  overflow: hidden
}

<textarea class="textareaClass"></textarea>

so you basicly want a text area that has no overflow? or do you actually want to manually set for example 300chars max when the with and height is total 300px or width: 50px and height 50px? — Ramon de Vries, Jun 19 '20 at 13:47
may look into this solution, http://jsfiddle.net/jy4qK/11/ via https://stackoverflow.com/questions/15908572/textarea-to-output-p-max-length-or-height?noredirect=1&lq=1 — AJK, Jun 19 '20 at 13:47
how dirty may the code be? it might be possible to create a jquery function that takes the width and height of the textarea, multiplies that and then calculate howmuch space each char would need. and then limit chars based on howmuch of the space a calculated char needs, and howmuch of those fit inside the total — Ramon de Vries, Jun 19 '20 at 13:59
When you put an input in your textarea. You have to check the length of the string, each char has its own size, a for loop to get the char size and to accumalate the results. When you have it (width of your string) , if you type another char and your string exceed the text area. do a js script to remove the input. It's just the idea, You will need to manage a lot of case. (determine the height, by getting the lineheight calculating your wrapped lines, ...). Some user's pref about their size or custom font can break your script. — Nico, Jun 19 '20 at 13:59
@RamondeVries i have trying to prevent character base on text area height and width. mean i have assign height and width so textarea is full so can' enter more characters. — Sumit patel, Jun 19 '20 at 14:00
@RamondeVries can you provide an example for your idea.please — Sumit patel, Jun 19 '20 at 14:03
i was thinking about something like this, but its not fully functional: https://jsfiddle.net/w4ruo3fh/ — Ramon de Vries, Jun 19 '20 at 14:34

score 0 · Answer 1 · answered Jun 19 '20 at 14:51

i created a code looking at howmuch chars fit in the width and height of the textarea and setting the max-lenght of the textarea based on that number

$('.textareaClass').keypress(function(){
 let width = $(this).css('width').replace(/[^-\d\.]/g, ''); //getting the width of textarea
  let height = $(this).css('height').replace(/[^-\d\.]/g, '');//getting the height of textarea
  let widthchar = Math.floor(parseInt(width) / 7.5);//based on the width howmuch characters fit sideways
  let heightchar = Math.floor(parseInt(height) / 15);//based on the height, howmuch lines of characters are there
  let totalchar = widthchar * heightchar; //multiply lines by chars sideways to get a total amount of chars
  $(this).attr('maxlength',totalchar);//setting the total as total for the text area
  $(".char").html('you are allowed to type:'+ totalchar+'character(s)');//output to see howmuch you can type, just for debug/programming reasons to see what's happening
});

.textareaClass {
  height:100px;
  width: 50px;
  resize: none;
  overflow: hidden
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="textareaClass"></textarea>
<div class="char">

</div>

This doesn't works as intended. Check my answer. This is scrolling. — doğukan, Jun 19 '20 at 14:59
Hmm this works when you type something, but doesn't work when I paste text. You should listen paste event also. — doğukan, Jun 19 '20 at 15:01
@Ramonde i have tried your code but some time output is wrong . i have set height:100px; width: 500px; so more space is remaining . so can you please help us — Sumit patel, Jun 19 '20 at 15:29
https://jsfiddle.net/patelsumit5192/f4voLek5/2/ . and whit space also calculate on text length. white space not exclude. — Sumit patel, Jun 19 '20 at 15:34

doğukan · Answer 2 · 2020-06-19T15:10:42.140

0

You can set the height and width property as ch (character) unit. And set maxlength="(width) * (height / line-height)" attribute to textarea.

.textareaClass {
  height: 10ch;
  width: 10ch;
  line-height: 2ch;
  resize: none;
  overflow: hidden
}

<!-- max-length should be 10 (width) * 10 (height) / 2 (line-height) = 10 * 5 = 50 -->
<textarea class="textareaClass" maxlength="50"></textarea>

edited Jun 19 '20 at 15:10

answered Jun 19 '20 at 14:51

doğukan

23,073
13
57
69

can you please provide px wise. – Sumit patel Jun 19 '20 at 15:20
px solution already provided by @RamondeVries. I suggested another useful simple method. – doğukan Jun 19 '20 at 15:24
https://jsfiddle.net/patelsumit5192/4e02r9ub/1/ i tried your code but any universal solution of px because my requirement is px wise. any idea 1ch = how many px ? – Sumit patel Jun 22 '20 at 04:18

Set Max characters in textarea base on Textarea height and width

2 Answers2

Linked