How do I make a textarea increase its WIDTH while the user is typing. Basically I need the WIDTH of the textarea to be only to the length of the longest line.
This is what I came up with. But when the user hits ENTER still the width increases. How do I make the textarea to fit only to the size of its text?
$(document).on("click blur keyup", ".fT", function() {
var newWidth = ($('#tfd').val().length)*10;
$('#tfd').width(newWidth);
});
As #progrAmmar mentioned, $('#tfd').val().length measures the total length for your text, not the width of the longest line.
In fact your newWidth is just an approximation and will not be correct at all if a user types non ASCII characters.
One way to approxmiate the length is to place a pre element somewhere, set visibility:hidden and font-size and font-family the same as your textarea, and update this element with the new content whenever the user types.
By measuring this pre element's width you can get a good approximation for the text.
Related
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
After a lot of research, I haven't found a post with exactly the same requirements so I thought write a new post.
I'm trying to create a fixed area (e.g. 200px by 300px) where the user can enter text input. He should be able to enter any character (including line breaks).
However, he should not be able to 'write outside the box' (i.e. there shouldn't be overflow scroll or hidden for the 200x300 area).
Once user reaches the 'bottom' of the area, they can't enter any more line breaks.
And once they reach the 'bottom right' corner of the 200x300 area, they shouldn't be able to enter any more characters at all.
Is this possible in css, angular, js, jquery, etc?
Limit the length of characters with base in font and div's size, but you must change the font size and family or line height because every browser can have different styles.
To limit the length of characters in the div is need to ignore the HTML tags in the content, like interpreting.
Firstly calculate how many characters fits there.
You can restrict the number of characters per line with the cols="" attribute and set the displayed the number of editable lines with the rows="" attribute. However limiting the number of rows could only be one with the maxlength attribute which would control the number of characters you can have, which you'd have to estimate. There are some hacks to limit the number of rows with event listeners, but they seem to have fairly major bugs.
It is possible, you just need to do following:
Use event handlers to control character input process. It is required to be able to stop processing further keystrokes when limit is reached. Use keypress and keydown, first handles character processing, second - control keys processing.
Each time user presses a key, use a separate buffer to produce final result, compute its bounding rectangle, and if it is bigger than limit, prevent event handling.
Height of text body could be calculated by multiplying number of lines by line height (interpret font-size and line-height CSS properties).
Width of text body could be computed rather easy with help of HTML5 canvas measureText method.
If you don't have canvas, you can use offscreen span (or any other inline) element - just fill innerHTML with text block and use its offsetWidth attribute. Actually, if you replace line break characters with <br>, you may use span approach to get both dimensions in one go - just make sure it has same style as editable container.
ContentEditable containers, as i remember, store text body in HTML format already (in other words - with <br>s instead of line break characters).
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/
I'm working with an HTML input of type text. I'm manually getting and setting the cursor of the input programmatically in JS using the Selection API.
When the cursor is set to a particular position like this, the scroll for the input isn't automatically focused on the cursor's location. To force the scroll to focus, the input's scrollLeft has to be manually calculated and set where the cursor's location would be. This is where the problem arises.
The cursor's position is set by the index of the character in the input's string of text. If there are 40 characters in the string, setting the cursor to position 40 would set it to the end of the string. Unfortunately, scrollLeft is set using the width of each character, in pixels. Since all character's aren't the same width this presents a problem. This means, to manually set the focus of the input element to the position of the cursor, you must calculate the width of each character between the start of the string and the cursor's position index.
The easiest way I've thought of to accomplish this is to create a second input that's used to measure the width of each character in the string individually. Since theres no way to automatically get the width of any given character, the scrollWidth of this second input would equal the width of that single character. For my use case, the cursor will only ever change position one index at a time. This means I can increment or decrement the scrollLeft the width of each character one at a time.
Because this is would be super complicated, I'm wondering if anyone has come across something simple that will accomplish my goal. Something like:
inputEL.scrollLeft = 'auto';
Note: Manually setting the cursor in the input and then calling focus() on that input doesn't work. But something like that would be ideal.
i try make book paging.
div height is 100px.
div have a long text. text is very long long string(2mb).
i want know text subString position.
how to know text length until 50px height??
There should be a different approach
You can get the div width.
var width= getWidth();
Calculate how many character in a row (calculate manually), based on that width. And get the row number within 50px.
var limit = getRowLimit();var n=getNRow();
Do a substring.
var subtext= mytext.substr(0,limit * n);