Question

我创建了div元素contentEditable，以便用户可以编辑其内容：

<div contentEditable='true' id='myDiv'>
    This content can be edited.
</div>

但是，我想阻止用户在div元素中键入新行。我已经尝试阻止keydown事件的默认操作无效：

var container = document.getElementById('myDiv');

function tryToPreventNewLines(e) {
    switch (e.keyCode) {
        case 13:
            container.blur();
            e.preventDefault();
            return false;
    }
    return true;
}

myDiv.addEventListener(
    'keydown', tryToPreventNewLines);
myDiv.addEventListener(
    'change', tryToPreventNewLines);

JSFiddle：http://jsfiddle.net/pwmspdm4/

在这种情况下，用户可以通过在div中按下回车键并且不放弃回车键来生成几个新行。

Answer 1

问题似乎是container.blur()电话;如果您使用setTimeout将事件移出事件处理，代码将起作用（阻止用户创建换行符，并使容器模糊）：

function tryToPreventNewLines(e) {
    switch (e.keyCode) {
        case 13:
            e.preventDefault();
            setTimeout(function() {
                container.blur();
            }, 0);
            return false;
    }
    return true;
}

Updated Fiddle

当然，我假设你希望在按Enter键时模糊容器。如果没有，只需完全删除该行。

在Chrome，Firefox和IE11上进行了测试。

在下方注意到，在Chrome上，按住Enter继续添加换行符，即使上面也是如此。我认为防止这种情况的唯一方法是控制contentEditable属性：

var container = document.getElementById('myDiv');

function tryToPreventNewLines(e) {
    switch (e.keyCode) {
        case 13:
            e.preventDefault();
            this.contentEditable = false; // No longer editable
            this.blur();                  // Remove selection box on Firefox
            return false;
    }
    // Removed the `return true;` here; it was a no-op
}

function enableEdit() {
    this.contentEditable = true;          // Make it editable
    this.focus();                         // And put the cursor in it
}

// Just for max compatibility, added the third argument below;
// some browsers still require it
myDiv.addEventListener(
    'keydown', tryToPreventNewLines, false);
myDiv.addEventListener(
    'change', tryToPreventNewLines, false);
myDiv.addEventListener(
    'click', enableEdit, false);

Updated Fiddle

如何阻止用户在contentEditable元素中键入新行？

1 个答案: