Question

我在Bootstrap 4模式对话框中有一个textarea，如下所示：

<div class="modal fade" id="updateTitle" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Update title of ticket</div>
                <button class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <textarea id="titleText"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save changes</button>
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
            </div>
         </div>
    </div>
</div>
</div>

<p id="title">Test</p>

我通过从另一个元素textarea复制来填充#title的内容，如下所示：

$("#updateTitle").on("show.bs.modal", function(event) {
    $("#titleText").text($("#title").text());
})

我还没有添加代码来保存更改。我测试了修改textarea中的文本，关闭了该对话框，然后再次将其重新打开。重新打开后，textarea会显示修改后的文本，而不是$("#title").text()的文本。

例如，如果我将Test更改为Test123，则在重新打开后它会显示Test123，即使上述脚本代码已将其恢复为Test。

我设置了一个断点，每次打开对话框时都可以确认是否执行了上述脚本。但是，textarea不会显示

这是设计使然吗？

Answer 1

您看到的问题是因为您更改了<textarea>上show.bs.modal的文本，但是当您在该<textarea>上键入内容时，改为设置其值！

在jQuery documentation上说：

.text（）方法不能在表单输入或脚本上使用。要设置或获取输入或textarea元素的文本值，请使用.val（）方法

因此解决方法是使用.val()：

$("#updateTitle").on("show.bs.modal", function(event) {
    $("#titleText").val($("#title").text());
});

小提琴： http://jsfiddle.net/aq9Laaew/158406/

重新打开后，模态中TEXTAREA的内容保持不变

1 个答案: