We Keep Coding

How to calculate max-height with using max-length property in Textarea

in the above example,input has max character length so user can not able to write anymore. So I have to don't allow resizing beyond 200 characters since that is max for this field. So i think need to calculate max-height property.
Pass maxLength property is 200 , line-height is 18px. Is there any way to calculate max height with these values ?
i found an example here but it doesn't work for me.

You should probably think about contenteditable. Add a few event listeners and you've got a dyanmically sized text area.
contenteditable on MDN
Making content editable also on MDN
To do what you want has too many variables to be done "properly" and the needed size of the textarea will depend on a number of factors such as the font being used, the size of the font.
Of course the content itself would also affect the required size, add a few new lines and you'll need even more height.
The mix of characters would also affect the needed size i.e. capital x's X and m's M take up much more space than periods '.' . and i's i (assuming a variable width font.)
.editable {
border: 1px solid black;
min-height: 1em;
}
<div contenteditable="true" class="editable">
This text can be edited by the user.
</div>

How to calculate character width from font size.

I'm trying to calculate the number of characters that fits in one line of a div and trim off the rest although text-overflow is an option I rather calculate the length of the string that fits in it properly. Is the font-size of a character almost equal to it's width, if not how do you calculate it's width including the text spacing and the width of a white space.
P.S. - Before flagging this question, do know I've went through most of the questions and answers and none of them were satisfactory.

One way I would do it is to check if there's enough space left in the div. To do this, you would need to create an identical div and slowly remove one character from the cloned div until the original div is bigger or equal in width to the cloned div.
divClone.textContent = text
document.body.appendChild(divClone)
while(divClone.clientHeight > originalDiv.clientHeight) {
divClone.textContent = divClone.textContent.substring(0, divClone.textContent.length-1)
}
originalDiv.textContent = divClone.textContent
You can then delete the cloned div when it's done

Resizing an arbitrary length string to fit into a fixed-size div

Having trouble finding a solution to this. I've got a "button" div 100px wide and 30px tall with a variable label. I want the font size to shrink itself so that the entire label text is always visible.
JS or CSS solutions both work for me, just no jquery.
In flash I solved this problem by checking the number of lines of text, if it's over 1 shrink the font size until it all fits in one line. Not sure if that's possible in javascript.
Edit: Not a duplicate, that person had a variable sized container so different solutions were possible.

One thing here you can do is get the label text into similar size of the div with following CSS attributes and then count it's scrollwidth, then write a javascript loop and decrease font-size by some pixels till you find it's scrollwidth is less than your desired width.
white-space: pre;
overflow-x: scroll;
Small Javascript code which I tried
// dummy divelement
var divElement = document.getElementById('#myelement')
var fontSize = 15; // Starting from 15
while(divElement.offsetWidth < divElement.scrollWidth) {
divElement.style.fontSize = fontSize + "px"
fontSize--;
}
Does this answer your question? or should I provide you whole example?

Increase font size by character length using javascript

Hellow, I was wondering how could I increase the font size by using as reference the characters length. What I'm trying to do is some kind of information post, which can (or not) have images, now, when a user only place text the height of the post is critical damaged in size (because of the randomness of characters the user inputs), so I was trying to develop this thing in which if the user put only text on the post the font could grow until the maximums height of the post is reached (650px) taking on consideration the characters, so few characters=bigger font, lot of characters= small font(until reach maximum font size). basically I want to find the font growing ratio by characters used.
Things to have in consideration:
The width is not important for this purpose.
For this purpose I cannot decrease the height of the post, has to be
650 px.
The maximum characters the post can has without damaging the height
is: 1202 characters and 10.5px
I know that the post require of a min length of characters to doesn't
look weird by the size incrementation.
If I din't explain my self correctly, please tell me, I would really appreciate this one, thanks.

Here's how I would change the font size depending on length :
function changeFontSize() {
var thisVal = $('#input').val(); //get input value
$('#output').text(thisVal); //change <p> text to input text
var fontSize = 300/thisVal.length; //alter font size depending on string length
$('#output').css("font-size", fontSize + "px"); //set font size
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id='input' onchange='changeFontSize()' onkeyup='changeFontSize()'>
<p id='output'>
</p>
</div>
The rest should be fairly easy to implement :)
Fiddle : https://jsfiddle.net/9m62qyxa/

How to increase width of textfield according to typed text? [duplicate]

This question already has answers here:
jQuery - auto size text input (not textarea!) [duplicate]
(9 answers)
Is there a jQuery autogrow plugin for text fields?
(10 answers)
Closed 4 years ago.
I want to increase the width of input text field automatically if a user inputs some text in it. But how to do it. Please help me.Can it be using Jquery or javascript
Thanks.

Try with this:
<script>
function adjustWidth(obj) {
obj.style.width = (obj.value.length) * 7.3 + "px";
}
</script>
<input type="text" onkeypress="adjustWidth(this)">
However this depends on text size, font, etc

The width cannot be increased as precisely as the width of character vary from one another.
But still, you can do something like this
$("input:text").keyup(function() {
$(this).css('width', $(this).val().length*10);
});
Demo
As you can see I am assuming that for every character the field size has to be increased by 10px. This is very hard to assign a correct ration that fits all the characters.

You mean something like
DEMO
<input style="width:100px" onkeyup="var len = this.value.length;
if (len>10) {
this.style.width=(parseInt(this.style.width)+10)+'px';
}" />

Actually, you can do it precisely. You do this by opening an absolutely-positioned div off-screen with the same font as your textbox and populating it with the text of your textbox on keyup. You then take the width of that div (which will conform to the text) and set your textbox to that width.
Note that the div needs to be off-screen (left:-9999px), not hidden (display:none) or it won't work since the browser needs to render the text in order to calculate the width. Also, setting the text of the div to your textbox contents plus a trailing space will help ensure that your textbox is always one character larger than needed, accounting for any lag between the key being displayed and the width being updated.
After the break I'll post a modified version of James Padolsey's JQuery Autoresize script that works with textareas to first resize the width to some maximum size, then the height once the text wraps. It's not exactly what you are looking for, but it might help.