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

Question

我正在使用 jQuery 2. 如果 space 是前导 space（例如在字符串的开头），我如何防止在文本框中输入它？我以为这样就可以了

   $(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;
     }
  })

基本上是这样，但有点马虎。您可以看到 space 被输入然后被删除，我一直在寻找更平滑的东西——因此 space 甚至一开始就没有出现在教科书中。

Answer 1

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

keydown : 这是第一次按下按键时触发的第一个事件
按键：这是输入发生的时间
keyup : 当你 "release" 键

所以，你有“keydown -> keypress -> fill the input -> release the key”

在您的场景中，您希望在实际输入被填充之前让事情发生，因此您必须使用 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">

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

编辑：

在 OP 的评论说您可以通过键入 space 然后返回到第一个字母前面来输入 space 之后，下面是一个解决问题的方法。

基本上，我现在的代码不是基于 "first character"，而是基于光标的位置。

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

新的 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

Answer 2

这是解决方案。

只需使用 keydown 而不是 keyup 并在条件 firstChar=="" 中使用 evt.preventDefault(evt)；给出下面的代码。

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

})

Answer 3

这是一个防止开头和结尾出现空格的示例。

 $(document).on("keypress","#s" ,function(evt){
     var firstChar = $("#s").val()
     if(evt.keyCode == 32){
        var cursorPos = $("#s").prop("selectionStart");
        //Prevents spaces in Beginning and more than on at the end
        if(cursorPos == 0 || (cursorPos == firstChar.length && firstChar[firstChar.length-1] == " "))
        {
            evt.preventDefault();
        }
     }
  })

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

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

How do I prevent a leading space from being entered in a textbox?

javascript

jquery

whitespace

keydown

onkeyup