javascript - 如何防止在文本框中输入前导空格？

Question

我正在使用 jQuery 2。如果文本框中有前导空格(例如在字符串的开头)，如何防止在文本框中输入空格？我以为这样就可以了

   $(document).on("keyup","#s" ,function(evt){
     var firstChar = $("#s").val()
     if(evt.keyCode == 32 && firstChar){
       $("#s").val( $("#s").val().trim() )
       console.log(" called ")
       return false;
     }
  })

基本上是这样，但有点草率。您可以看到空格被输入然后被删除，我一直在寻找稍微平滑的东西 - 空格甚至没有出现在教科书中。

Answer 1

您必须了解 keyup、keypress 和 keydown 事件之间的区别:

• keydown :这是第一次按下按键时触发的第一个事件
• 按键:这是输入发生的时间
• keyup :当您“释放”按键时

所以，你有“按键 -> 按键 -> 填充输入 -> 释放按键”

在您的场景中，您希望在实际输入填充之前发生事情，因此您必须使用 keydown 事件而不是 keyup

从那里，返回 false 将导致停止事件的传播，因此 “keydown ->//事情会在这里中断//-> 按键 -> 填充输入 -> 释放按键”

最后一件事是你的状况。在你的代码中，你不会检查firstChar是否实际上是空的，你只是每次都有一些东西，因为你得到了值。只需更改一下您的条件即可使代码正常工作。

这是一个工作演示:

$(document).on("keydown","#hello" ,function(evt){
     var firstChar = $("#hello").val()
     if(evt.keyCode == 32 && firstChar == ""){
     	return false;
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="hello">

对于最后一个空格，我猜你无法预测是否会添加第二个单词，所以只需执行正常的 trim 操作，或者如果你确定只会输入一个单词，只需调整条件即可。

编辑:

OP 的评论说您可以通过键入空格然后返回到第一个字母前面来输入空格，下面是一个修复程序，可以解决这个问题。

基本上，我现在的代码不是基于“第一个字符”，而是基于光标的位置。

如果光标在位置0，我们就不让用户输入空格，否则就可以了。

新的 JS 代码如下所示:

$(document).on("keydown","#hello" ,function(evt){
     var caretPos = $(this)[0].selectionStart
     if(evt.keyCode == 32 && caretPos == 0){
        return false;
     }
});

编辑2:

瑞克·希区柯克评论:

$() returns a jQuery collection. You can access an individual element of the collection by referring to its index ([0], [1], [2], ...). You already have the individual element (this), and there's no need to put it in a jQuery collection just so you can immediately take it back out.

考虑到这一点，$(this)[0].selectionStart 可以替换为 this.selectionStart