javascript - 输入键创建一个新段落

标签 javascript jquery

我有这个 fiddle :http://jsfiddle.net/2mw4c/1/

$(document).on("keypress", ".content", function (e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        pasteHtmlAtCaret('</p><p>');
    }
});


function pasteHtmlAtCaret(html){
    var sel, range;
    if(window.getSelection){
        // IE9 and non-IE
        sel = window.getSelection();
        if(sel.getRangeAt && sel.rangeCount){
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while((node = el.firstChild)){
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if(lastNode){
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    }else if(document.selection && document.selection.type != "Control"){
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

我不知道如何完成当有人按 Enter 时,它会跳出当前的 <p> 的任务。标记并开始一个新的 <p>标签,就像在所见即所得编辑器中一样。有什么建议吗?

最佳答案

喜欢这样吗?

$('p').on('keypress', function (e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        $(this).after('</p><p>');
    }
});

拉了一把 fiddle :http://jsfiddle.net/filever10/5QXqH/

关于javascript - 输入键创建一个新段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19802386/

相关文章:

javascript - 在通过 Object.create 创建的对象上设置原型(prototype)

javascript - 如何使用树遍历方法抓取任何表行中的数据 (HTML/JavaScript)

javascript - 没有javascript的基于列的轮播需要创建循环

javascript - PHP 或 JavaScript/jQuery 中的 Future timeago 方法

javascript - TypeError : $. validator.methods[method] 未定义

javascript:刷新时选择的随机图像

javascript - 使用 JavaScript 在 Django 管理站点上添加动态字段

javascript - 如何在与段落一起使用的javascript中添加换行符

javascript - VueJS 模板引擎中的 Locutus

javascript - 带有非常简单 slider 的多个 slider