Question

Jquery .append不能在firefox或safari中工作，但.val会工作。

有趣的是，相同的代码在IE中运行良好。

代码：

<head>
    <link rel="stylesheet" type="text/css" href="  https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script type = "text/javascript">
    $(document).ready(function () {           
         $("#notes").change(function () {
            $('#notes').val($('#notes').val() + "Test1");
            $('#notes').append('Test2');
        });            
    });
</script>

<textarea rows="10" name="Notes1" id="notes" style="width: 100%" ><?php
    if (isset($_SESSION['order'])) {
        echo $_SESSION['order'][0]['tNotes'];
    }
</textarea>

所以上面的代码工作正常，Test1和Test2都被添加到Internet Explorer中的textarea但只有.val在FF / safari中运行Test1而.append不运行。

这是为什么？获得等价物的任何帮助或替代方案（将文本附加到已编辑的地方而不仅仅是底部）

Answer 1

编辑：

（将文字附加到已编辑的地方而不仅仅是底部）

使用val()使其适用于所有浏览器。

See this updated fiddle

$(document).ready(function () {
  $("#notes").change(function () {
    insertAtCaret($(this).prop('id'),"this");
    $(this).val($('#notes').val() + "here");
  });
});

注意 - 我使用此SO帖子中的函数： Inserting a text where cursor is using Javascript/jquery

Answer 2

Textarea是一个输入容器类型，因此您必须使用.val（）方法来设置元素的值。 .append（）在IE中工作，因为IE不关心标准。

.append不能在firefox或safari中工作

2 个答案: