jquery contenteditable enter“当​​有人按下回车键时如何触发shift-enter?”

Posted

技术标签:

【中文标题】jquery contenteditable enter“当​​有人按下回车键时如何触发shift-enter?”【英文标题】:jquery contenteditable enter "How do I trigger shift-enter when someone presses enter?" 【发布时间】:2010-12-08 22:35:45 【问题描述】:

当在 chrome 的 contenteditable 中按 enter 时,会插入一个 div。这干扰了我的标记,我需要它是一个 br。

我知道 shift-enter 是一个 br。解决问题的最佳方法是什么?

谢谢。

重新表述问题:当有人按下回车时如何触发 shift-enter?

我试过这样写:

$(document).keyup(function hotkeys(e)  
    if (e.which == 13)
    
        e = jQuery.Event("keydown")
        e.which = 16;
        $(document).trigger(e);
        e.which = 13;
        $(document).trigger(e);
        alert("trigger");
    
);

它不起作用。

谢谢。

【问题讨论】:

【参考方案1】:

假设rangy.js,

$('#myeditelement').on('keydown', function(ev)
    if (ev.which === 13)  insertNewLine(ev) 
)

那么,

function insertNewLine(ev)
    var nodeA, nodeB, sel, range

    if (ev.stopPropagation)  ev.stopPropagation() 
    if (ev.preventDefault)  ev.preventDefault() 

    sel = rangy.getSelection()
    range = sel.getRangeAt(0)

    range.deleteContents()
    nodeA = document.createElement('br')
    range.insertNode(nodeA)
    range.setStartAfter(nodeA)
    nodeB = document.createElement('span')
    range.insertNode(nodeB)
    range.selectNodeContents(nodeB)
    sel.removeAllRanges()
    sel.addRange(range)
    sel.collapseToEnd()
  

截至 2017 年 11 月已在 Chrome、Opera、Edge 中测试。

【讨论】:

以上是关于jquery contenteditable enter“当​​有人按下回车键时如何触发shift-enter?”的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jQuery 在 contenteditable div 中移动插入符号?

jquery在contenteditable div中设置光标位置

jquery localStorage for contenteditable content以记住编辑的内容

如何避免从 jQuery 中的 contenteditable <p> 中删除键入的文本

contentEditable div 中的粗体选定文本,使用纯 JavaScript,不使用 jQuery 等库

jquery contenteditable enter“当​​有人按下回车键时如何触发shift-enter?”