javascript - 如何在按键上 $.trim 一个 contenteditable div

Question

我正在尝试在按键时 trim 一个 contenteditable div，但似乎没有任何效果。

HTML

<div class="datacollection NoFirstInputSpace" placeholder="____________" contenteditable</div>

$(document).on('keypress', '.NoFirstInputSpace', function(e) {

    var str = $(this).text();
    $.trim(str);
    var code = e.keyCode ? e.keyCode : e.which;
    if (code === 32 && (e.target.selectionStart === 0 || getCaretCharacterOffsetWithin(e.target) === 0)) {
        e.preventDefault();
        return false;
    }

});

按键工作正常，它可以防止用户输入空格作为内容可编辑的 div 的第一个字符。但是问题是，如果最终用户键入一个字符串，然后突出显示它，然后按空格键，它将用空格替换字符串，我不能将空格作为第一个字符

Answer 1

您应该改为绑定(bind) keyup 事件并检查按下的键是 Space。

如果为 true，则 trim 空白并将 .text() = 设置为空。

此外，keyCode 已弃用。使用键。

参见 reference .

$(document).on('keyup', '.NoFirstInputSpace', function(e) {
  if (e.key == ' ') {
    var text = $.trim($(this).text());
    if (text == '') {
      $(this).text('');
    }
  }
});

.NoFirstInputSpace {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="datacollection NoFirstInputSpace" placeholder="____________" contenteditable></div>