Question

我正在使用HTML / PHP表单来注册用户。

使用以下代码，我得到它，输入字段中没有空格。

<!DOCTYPE html>
<html>
<head>
<script>
    function stripspaces(input)
    {
        input.value = input.value.replace(/\s/gi,"");
        return true;
    }
</script>
</head>
<body>
    Enter your username: <input onkeydown="javascript:stripspaces(this)" name="field_with_no_spaces" type="text" />
</body>
</html>

但我读了（Disable spaces in Input, AND allow back arrow?）关于更好的方法来做到这一点。我试过了：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $("input#UserName").on({
            keydown: function(e) {
                if (e.which === 32)
                    return false;
            },
            change: function() {
                this.value = this.value.replace(/\s/g, "");
            }
        });
    </script>
</head>
<body>
    Enter your username: <input id="UserName" name="UserName" type="text" />
</body>
</html>

但它不起作用，有人可以帮助我吗？是因为我的jQuery版本吗？

谢谢，

Answer 1

您忘记将代码包装在.ready()回调中，请参阅代码段。

目前，当您的代码执行时，DOM尚未加载到内存中并进行解析，因此JavaScript代码会调用尚不存在的元素，因此无法添加事件侦听器。

<input onkeydown="javascript:stripspaces(this)" name="field_with_no_spaces" type="text" id="" />

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("input#UserName").on({
        keydown: function(e) {
          if (e.which === 32)
            return false;
        },
        change: function() {
          this.value = this.value.replace(/\s/g, "");
        }
      });
    });
  </script>
</head>
<body>
  Enter your username: <input id="UserName" name="UserName" type="text" />
</body>
</html>

＆＃13;

Answer 2

onkeypress='return event.charCode != 32'

这会阻止输入space，并且不依赖于JQuery。

但你仍然应该用php验证，因为任何JS都可以轻易绕过;）

Answer 3

您需要在创建DOM元素之后添加您的js代码（因此就在示例中的结束正文标记之前），或者使用“$ function”声明。否则，当评估$（“input＃UserName”）时，尚未创建任何输入，因此不会附加处理程序

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
    $("input#UserName").on({
        keydown: function(e) {
            if (e.which === 32)
                return false;
        },
        change: function() {
            this.value = this.value.replace(/\s/g, "");
        }
    });
    })
</script>
</head>
<body>
Enter your username: <input id="UserName" name="UserName" type="text" />
</body>
</html>

HTML输入字段：使用jQuery 3.2.1删除空格

3 个答案: