javascript - 使用 jquery 在 powerportals 中的 textarea 下方添加一个按钮

Question

我想知道是否可以使用 jquery 在文本区域下方添加一个按钮。我在电源门户页面中生成了如下所示的 html。

<textarea rows="7" cols="20" maxlength="2000" id="description" class="textarea form-control "></textarea>

我想在它下面添加一个按钮。我正在使用下面的代码，但它根本不显示按钮。

$(document).ready(function () {
$("#description").append("<button type='button' id='btnSave' class='btn' 
style='color:#fff;background-color:#36f;border-color:36f;' 
onclick='savefunction'>Save</button><br><br>");
});

Answer 1

您不能将 html 放入 textarea 中，您只能将文本放入其中。如果要在文本区域内显示按钮，可以尝试将按钮附加到文本区域的父级上。并相应地定位按钮。

$(document).ready(function () {
$("#textwrapper").append("<button onclick='savefunction' id='btnSave' type='button' style='color: #fff; background: #36f; border-color:#36f; display:block; margin-left:auto;'>Save</button><br><br>");
});

* {
  box-sizing: border-box;
}
.textarea-wrapper {
  position: relative; 
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="textwrapper" class="textarea-wrapper">
<textarea rows="7" cols="20" maxlength="2000" id="description" class="textarea form-control "></textarea>
</div>