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

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 -> keypress -> 填充输入 -> 释放键”

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

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

最后一件事是你的条件。在您的代码中，您没有检查 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">

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

编辑 ：

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

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

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

新的 JS 代码如下所示：

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

编辑2：

里克希区柯克评论：

$() 返回一个 jQuery 集合。您可以通过引用其索引 ([0], [1], [2], ...) 来访问集合的单个元素。您已经拥有单个元素 (this)，无需将其放入 jQuery 集合中，这样您就可以立即将其取出。

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