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

Question

我正在使用jQuery2。如果它是前导空格（例如，在字符串的开头），如何防止在文本框中输入空格？ 我以为这样可以

   $(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-> fill the input-> release key ”

在您的方案中，您想在实际输入被填充之前使事情发生，因此您必须使用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可以被this.selectionStart代替。

Answer 2

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

  $(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"> 

Answer 3

这是解决方案。

只需使用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;
 }

}）