gpt4 book ai didi

javascript - 关于调整文本区域大小的指针

转载 作者:行者123 更新时间:2023-12-03 10:08:51 25 4
gpt4 key购买 nike

需要一些帮助/指示......

当用户单击 p 元素时,我希望其内容显示在文本区域中,以便可以修改文本等...

文本区域的宽度是固定的。因此,当最后一个字符位于右边框时,它将自动位于下一行。在这种情况下,为了创建一个新行,我是否应该计算固定宽度的文本区域中有多少个字符,并且每次满足该数字时添加一个新行?

另外,如果用户在到达右边界之前会断线,我是否应该搜索\n RegExp?(使用 .match()?)

我认为这两种情况需要是一个 timeInterval(也许是 setTimeout?)来以毫秒为单位检查发生的所有打字。我正在尝试用纯 Javascript 来做到这一点

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="p1">text text text text text text text text text text text,
text text text text text text text text text text text,
text text text text text text text text text text text,
text text text text text text text text text text text.
</p>
<div id="holder"></div>
<script type="text/javascript">
var text_to_copy = document.getElementById('p1').textContent;
//every row with a fixed text area width fits 62 characters
var input = document.createElement("textarea");
var holder = document.getElementById("holder");

document.getElementById('p1').onclick = function(){

holder.appendChild(input);
input.id = "textarea_id";
input.style.width = "412px";
input.value = text_to_copy.replace(/\s{1,}/g, ' ');

if(text_to_copy.match('\n')){
input.rows +=1;
}

/*setTimeout(function(){
if ((text_to_copy.length % 62) == 0){

input.rows += 1;
}
},300);*/
}
</script>
</body>
</html>

最佳答案

您可以使用 clientHeight 与scrollHeight 调整文本区域高度以匹配滚动高度

这是您的代码的工作副本

var text_to_copy = document.getElementById('p1').textContent;
var input = document.createElement("textarea");
var holder = document.getElementById("holder");

document.getElementById('p1').onclick = function(){

holder.appendChild(input);
input.id = "textarea_id";
input.style.width = "412px";
input.value = text_to_copy.replace(/\s{1,}/g, ' ');

//This function reset the textarea height base on his content. (when text is added/removed)
var setTextAreaHeight = function(){
input.style.height = '5px'; // Set to minimum height possible to create vertical scroll bars
input.style.height = input.scrollHeight + 'px'; // remove the scroll bars
}

//call it once
setTextAreaHeight();

//attach to changes/key pressing.
input.onkeydown = setTextAreaHeight;
input.onkeyup = setTextAreaHeight;
input.onchange = setTextAreaHeight;
};
        <p id="p1">text text text text text text text text text text text,
text text text text text text text text text text text,
text text text text text text text text text text text,
text text text text text text text text text text text.
</p>
<div id="holder"></div>

关于javascript - 关于调整文本区域大小的指针,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30235386/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com