如何防止在文本框中输入前导空格? [英] How do I prevent a leading space from being entered in a textbox?

问题描述

我正在使用jQuery2.如果它是前导空格(例如，在字符串的开头)，如何防止在文本框中输入空格?我以为这样就可以了

I'm using jQuery 2. How do I prevent a space being entered in a textbox if it is a leading space (e.g. at the beginning of the string)? I thought this would do it

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

基本上可以，但是有点草率.您可以看到正在输入的空格，然后将其删除，我正在寻找稍微平滑一点的东西-因此，该空格甚至根本没有出现在教科书中.

And basically it does but it is a little sloppy. You can see the space being entered and then removed and I was looking for something slightly smoother -- whereby the space doesn't even make it in the textbook in the first place.

推荐答案

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

You have to understand the difference between keyup, keypress and keydown events :

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

因此，您具有" keydown-> keypress->填充输入->释放键"

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

In your scenario, you want to make things happend BEFORE the actual input gets filled, so you have to use the keydown event instead of the keyup

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

From there, returning false will result in stopping the propagation of the event, so "keydown -> // Things will break here // -> keypress -> fill the input -> release the key"

最后一件事是您的状况.在您的代码中，您并没有检查firstChar是否为空，而是每次都拥有一些东西，因为您得到了值.只需更改一下条件即可使代码正常工作.

The last thing is your condition. In your code, you are not checking if firstChar is actually empty, you are just having something everytime because you get the value. Just changing a bit your condition made the code work.

这是一个工作示例:

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

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

For the last space, you cannot predict if a second word will be added I guess, so just do the normal trim thing, or if you are sure that only one word will be typed, simply adapt the condition.

OP发表评论说您可以通过键入空格然后再输入第一个字母的前面来输入空格之后，下面是一个解决问题的修补程序.

After OP's comment saying that you can input a space by typing a space then coming back in front of the first letter, Below is a fix that does the trick.

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

Basically, I base my code now not on the "first character", but on the cursor's position.

如果光标位于位置0，则我们不允许用户输入空格，否则可以.

If the cursor is at position 0, we don't let the user enter a space, otherwise, it is ok.

新的JS代码如下:

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

Rick Hitchcock评论:

Rick Hitchcock comment :

$()返回一个jQuery集合.您可以访问单个元素 通过引用其索引([0]，[1]，[2]，...)对集合进行排序.你 已经具有单个元素(此)，并且无需放置 放在jQuery集合中只是为了让您可以立即将其取回

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

By taking this into account, $(this)[0].selectionStart can be replaced by this.selectionStart

这篇关于如何防止在文本框中输入前导空格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！