如何$ .trim在keypress

时间:2017-06-08 16:13:38

标签: javascript jquery html

我试图在按键时削减一个满足的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;
    }

});

按键正常工作,它可以防止suer进入空间作为contenteditable div的第一个字符。然而问题是如果最终用户键入一个字符串然后突出显示它然后按空格键它将用空格替换字符串,我不能将空格作为第一个字符

1 个答案:

答案 0 :(得分:2)

您应该绑定keyup事件,并检查按下的键是 Space

如果为true,则修剪空格并将.text() =设置为空。

此外,不推荐使用keyCode。使用key

请参阅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>