从 Javascript 追加后，Textarea 不会使用预填充值自动增长高度

Question

我正在研究Spring Application。我想将预填充的值设置为文本区域并显示给用户。我需要该文本区域根据内容显示多行高度。

我尝试了一些来自互联网的脚本，但没有运气。

我创建了示例代码以了解我的目标。

function submit() {
$("#text").remove();
let data = `<textarea id="text" rows="1">asdaaaaaaa
asddas
asasd
assd
daasd
dsasd
sdasd
asdasd</textarea>`
$("#banner-message").append(data);
}

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<div><button type="button" onclick="submit()">Click Me!</button></div>
</div>

我希望从 jquery 追加后，textarea自动增长高度适合内容。

Answer 1

你能做的最好的事情是动态创建一个文本区域，这更好，使用jquery会更容易。检查换行符并将这么多行分配给文本区域。

function submit() {
$("#text").remove();
let data = `asdaaaaaaa
asddas
asasd
assd
daasd
dsasd
sdasd
asdasd`
let textarea = $(document.createElement("textarea")), // new element of textarea
matches = data.match(/n/g), // match the line breaks from data
breaks = matches ? matches.length : 2; // get the length or return 2
textarea.val(data) // append the value to the textarea
textarea.attr('rows', breaks + 2); // assign the attribute to the texarea
textarea.attr('id', "text"); // assign the id to textarea
$("#banner-message").append(textarea); // append the textare to the div
}

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<div><button type="button" onclick="submit()">Click Me!</button></div>
</div>

Answer 2

添加到Calvin Nunes的评论中，您可以尝试这样的事情(在附加节点之后(。

function submit() {
$("#text").remove();
let data = `<textarea id="text" rows="1">asdaaaaaaa
asddas
asasd
assd
daasd
dsasd
sdasd
asdasd</textarea>`
$("#banner-message").append(data);
// count number of lines in text's value
var numRows = ($("#text").val().match(/n/g) || []).length + 1;
$("#text").attr("rows", numRows);
}

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<div><button type="button" onclick="submit()">Click Me!</button></div>
</div>

Answer 3

为此，我设置计时器以使用 javascript 重新加载内容。

javascript加载的内容之所以不起作用，是因为html尚未加载，因此在html加载后使用计时器从javascript重新加载内容，它将正常工作。您可以根据需要尝试将持续时间减少到较低，并测试它是否有效。