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：这是第一次关键时触发的第一个事件
keypress：这是输入发生的时间
keyup：当你“释放”密钥时

所以，你有“ keydown - ＆gt; keypress - ＆gt;填写输入 - ＆gt;释放密钥”

在您的方案中，您希望在实际输入被填充之前完成任务，因此您必须使用keydown事件而不是keyup

从那里，返回false将导致停止事件的传播，所以 “ keydown - ＆gt; //事情会在这里破坏// - ＆gt; keypress - ＆gt;填写输入 - ＆gt;释放密钥”

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

Rick Hitchcock评论：

$（）返回一个jQuery集合。您可以访问单个元素通过引用其索引（[0]，[1]，[2]，...）来收集集合。您已经有了单独的元素（这个），并且没有必要放它只是在jQuery集合中，你可以立即收回它进行。

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

Answer 2

以下是一个阻止开始结束空格的示例。

＆＃13;

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

＆＃13;

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

＆＃13;

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;
 }

}）

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

3 个答案: