Question

我有一个pre标签，显示从数据库中获取的文本（购物订单的注释）。我使用pre标签，因为它显示新行。

我在其上使用contenteditable="true"，以便用户可以编辑该字段，然后点击保存按钮进行保存。

但是在保存时，当我使用field.text()获取字段的值时，不会保留新行。

重现：

HTML：

<pre id="notes" contenteditable="true">Some

test


Txt

</pre>

JS：

// Works fine here
console.log($('#notes').text());

// add some text with new lines, then "blur" the text and you can see the issue happening in the log -- new lines not preserved
$('#notes').on('blur', function (e) {
    console.log($('#notes').text());
});

我正在尝试但到目前为止还没有成功

// When user presses enter on an editable field.
$('#notes').on('keydown', function (e) {


    if (e.keyCode === 13) {
        // trap the return key being pressed and insert new line at THIS place --- how??? (Possibly not the most elegant solution either)
    }
});

https://jsfiddle.net/6496pke5/

Answer 1

使用html（）代替text（），以便在按Enter键创建一个分隔线。使用html（）会将<br>标记包装到<div>元素中，以防止该行为使用document.execCommand（）方法：

$('#notes').on('keydown', function (e) {

    if (e.keyCode === 13) {
        document.execCommand('insertHTML', false, '<br>');
        return false; 
    }

});

这是小提琴https://jsfiddle.net/6496pke5/1/

Answer 2

不会，因为你在做

enter

因为当您按<br>创建新行textContent时会添加到标记中，该标记不会出现在element .text()的{{1}}属性中console.log($('#notes').html()); 1}}是。的简短形式。

尝试改为

<br>

您会看到添加新行has_attached_file(:image, :styles => { :logo => "300x2000>", :thumbnail => '100x100#', :large => '1000x1000#', :background => '2048x1024#' })。

带有contenteditable = true的pre标签 - 新元素不会保留在元素的text（）内容中

2 个答案: