禁用输入中的空格,并允许后退箭头?

IT技术 javascript jquery html input
2021-02-28 02:50:39

我正在尝试禁用用户名文本字段中的空格,但是我的代码也禁用了使用后退箭头。有什么办法也允许后退箭头吗?

    $(function() {
         var txt = $("input#UserName");
         var func = function() {
                      txt.val(txt.val().replace(/\s/g, ''));
                   }
         txt.keyup(func).blur(func);
    });

小提琴:http : //jsfiddle.net/EJFbt/

4个回答

您可以添加keydown处理程序并阻止空格键的默认操作(即32):

$("input#UserName").on({
  keydown: function(e) {
    if (e.which === 32)
      return false;
  },
  change: function() {
    this.value = this.value.replace(/\s/g, "");
  }
});

演示: http : //jsfiddle.net/EJFbt/1/

@想象: s/the OP/some other future visitor/
2021-04-29 02:50:39
change跨浏览器文本粘贴需要@LightnessRacesinOrbit
2021-05-01 02:50:39
请注意,change事件发生在模糊时,而不是在用户键入时发生。
2021-05-07 02:50:39
好的; 这就说得通了。如果在答案中给出这种解释,那就太好了。
2021-05-08 02:50:39
@jakeed1:你和我都明白答案,但 OP 可能不明白。答案包含由代码示例补充的文本解释不仅仅是无声的代码转储。
2021-05-16 02:50:39

这似乎对我有用:

<input type="text" onkeypress="return event.charCode != 32">
也适用于我(Safari 15.0,Firefox 93)
2021-05-02 02:50:39
实际上,这里event.charCode已弃用请使用代替
2021-05-06 02:50:39

它不会“禁用”后退箭头——你的代码会不断地替换所有文本,每当你按下一个键,每次发生时插入符号位置都会丢失。

不要那样做。

使用更好的机制来禁止空格,例如当按下的键是从 onkeydown 处理程序返回falsespace

$(function() {
    $("input#Username").on("keydown", function (e) {
        return e.which !== 32;
    });​​​​​
});

这样,您的文本框首先被禁止接收空格,您不需要替换任何文本。因此,插入符号将不受影响。


更新

@VisioN的改编代码还将将此空间禁止支持添加到复制粘贴操作,同时仍然避免keyup影响您的文本框值的text-replacement-on-处理程序,而您的插入符号仍在其中。

所以这是最终的代码:

$(function() {

    // "Ban" spaces in username field
    $("input#Username").on({

       // When a new character was typed in
       keydown: function(e) {

          // 32 - ASCII for Space;
          // `return false` cancels the keypress
          if (e.which === 32)
             return false;
       },

       // When spaces managed to "sneak in" via copy/paste
       change: function() {
          // Regex-remove all spaces in the final value
          this.value = this.value.replace(/\s/g, "");
       }

       // Notice: value replacement only in events
       //  that already involve the textbox losing
       //  losing focus, else caret position gets
       //  mangled.
    });​​​​​
});
一切如此接近......但是如果你复制并粘贴一个带有空格的名称(我的团队出于某种原因这样做),它仍然保留了空格。
2021-04-26 02:50:39
@jakeed1 该代码只会在您聚焦另一个元素时删除空格,因为更改仅发生在模糊时。代码完美地满足了我们的需求。
2021-04-29 02:50:39
@julealgon:我在评论后 7 分钟解决了 jakeed 的问题。两年多前!:)
2021-05-15 02:50:39

尝试在您的函数中检查正确的键代码:

$(function(){
    var txt = $("input#UserName");
    var func = function(e) {
      if(e.keyCode === 32){
        txt.val(txt.val().replace(/\s/g, ''));
      }
    }
    txt.keyup(func).blur(func);
});

这样只有keyCodeof 32(a space) 调用替换函数。这将允许其他keypress事件通过。根据 IE 中的可比性,您可能需要检查是否e存在、使用e.which或使用全局 window.event 对象。不过,这里有很多问题涵盖了这些主题。

如果您对某个不确定,请keyCode尝试这个有用的网站

这仍然会裂伤,当你插入位置space,这是不可取的。
2021-05-14 02:50:39