[英]Get 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 .我只是添加了文本,并且在转到下一行时没有单击 enterKey 。 It automatically goes to next line as Overflow: hidden is added.它会自动转到下一行作为 Overflow: hidden 添加。
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.我尝试过使用split("\n") 方法,但没有用。 while trying Split approach, I am getting full value.在尝试拆分方法时,我获得了全部价值。
"Sarah and Ira drove to the store Samantha, Elizabeth, and Joan are on the committees" “Sarah 和 Ira 开车去商店,Samantha、Elizabeth 和 Joan 是委员会成员”
I wanted the array of content as per rows with clicking enterKey/ without clicking enterKey .我希望通过单击 enterKey/ 而不是单击 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.注意:-我的主要动机实际上是根据行获取内容数组,并将相同的内容(行数组)放入 fabricjs 的文本框 object 中。
Explaining:- I have a Textarea of HTML and a textbox object in canvas of fabricjs.解释:-我在 fabricjs 的 canvas 中有一个文本区域 HTML 和一个文本框 object。
I have added some content in textarea of HTML.我在HTML的textarea中添加了一些内容。
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.现在我必须将内容(在 HTML 的 Textarea 中使用相同的行和文本编写的相同内容)保存(放置/显示)到 fabricjs 的文本框 object 中。
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.最重要的部分是: 在 html 中使用“rows”和“cols”来限制文本区域的大小。 You may need to synchronize this size with the site's font-size.您可能需要将此大小与站点的字体大小同步。
In CSS just use resize: none在 CSS 中,只需使用 resize: none
In JS I cut the text looking for spaces and then calculate how many characters fit in each of the lines.在 JS 中,我剪切文本以寻找空格,然后计算每行中适合多少个字符。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.