0
159
ViewsGet array of content as per rows in textarea html
I have a textarea , when I press any key or by copy-pasting the content.
I wanted to get the array of content as per rows.
.text {
overflow: hidden;
font-size: 5vh;
text-align: center;
line-height: 1.5;
}<textarea class="text" autofocus></textarea>
I have simply added the text and I am Not clicking enterKey while going to next line. It automatically goes to next line as Overflow: hidden is added.
Now I must get the array like this:-
["Sarah and Ira drove to "],
["the store Samantha, "],
["Elizabeth, and Joan are "],
["on the committees"].
By every update in content, the array should be updated too.
I have tried with split("\n") approach, it didn't worked. while trying Split approach, I am getting full value.
"Sarah and Ira drove to the store Samantha, Elizabeth, and Joan are on the committees"
I wanted the array of content as per rows with clicking enterKey/ without clicking enterKey. By both ways it should work.
Anyone have any ideas?
Note:- My main motive is actually get the array of content as per rows and put the same content(array of rows) in textbox object of fabricjs.
Explaining:- I have a Textarea of HTML and a textbox object in canvas of fabricjs .
I have added some content in textarea of HTML.
Now I have to save(put/show) that content(Same content written in Textarea of HTML with same rows and text) into textbox object of fabricjs.
1 answers
Answer question0
I made code that works. It can be optimized a lot, but it took me over an hour so I couldn't do it...
The most important parts are: In html use "rows" and "cols" to limit the size of the textarea. You may need to synchronize this size with the site's font-size.
In CSS just use resize: none
In JS I cut the text looking for spaces and then calculate how many characters fit in each of the lines.
- If the word fits on the line, add
- If it doesn't fit and is too big, cut it out and add the fragments.
- If it doesn't fit on the line create another line and add this word
- repeat until the text ends
let arraySync = [];
let textarea = document.querySelector('textarea');
textarea.addEventListener('keyup', event_);
textarea.addEventListener('select', event_);
function event_(event){
let value = event.target.value;
event.target.value = runTextarea(event.target, true);
arraySync = runTextarea(event.target);
console.log(arraySync);
};
function runTextarea(element, keyupOrSelect = false) {
let text = element.value;
let maxPerLine = 25;
let result = [['']];
let charactersOnLine = 0;
let wordOnLine = 0;
text = text.split(/\s+/).forEach(function(word) {
let length;
if (wordOnLine !== 0) {
word = ' ' + word;
};
if (charactersOnLine + word.length <= maxPerLine) { // push the word
wordOnLine++;
charactersOnLine += word.length;
result[result.length - 1][0] += word; // use array existing
} else if (word.length > maxPerLine) { // split the word
wordOnLine = maxPerLine - 1;
charactersOnLine = 0;
word = word.replace(/^\s/, ''); // remove the first space
while (word.length > maxPerLine) {
let splittedWord = word.substring(0, maxPerLine - 1) + '-'; // split on maxLength
// add new line
wordOnLine = 1;
charactersOnLine = splittedWord.length;
result.push([splittedWord]);
word = word.substring(maxPerLine);
};
if (word.length > 0) {
// add new line
wordOnLine = 1;
charactersOnLine = word.length;
result.push([word]);
};
} else { // push the word
word = word.replace(/^\s/, ''); // remove the first space
wordOnLine = 1;
charactersOnLine = word.length;
result.push([word]);
};
});
return keyupOrSelect ? result.join(' ') : result;
};textarea {
resize: none;
}<textarea rows="7" cols="25">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae, placeat sunt veritatis temporibus quo nesciunt voluptates aliquam at iure. Ducimus vel, autem delectus deleniti magnam minus dignissimos aut odit doloremque?</textarea>