javascript - 不允许在输入表单中出现空白字符/空格

Question

是否可以在如下输入表单中不允许空白字符/空格？

<input type="text" value="" maxlength="30" name="email" class="formfield w0">

Answer 1

检查这个小提琴。相关代码：

 $(function() {
        $('#input1').on('keypress', function(e) {
            if (e.which == 32){
                console.log('Space Detected');
                return false;
            }
        });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="input1" />

Answer 2

使用 HTML5 的扩展输入类型来应用约束验证，这将防止在现代浏览器中提交带有无效电子邮件的表单：

<input type="email" value="" maxlength="30" name="email" class="formfield w0">

在较旧的浏览器中，您可以检测到输入的类型不是“电子邮件”，因为当一个值被认为无效时，它将默认为“文本”。我建议阻止提交表单，而不是阻止空格键的默认操作，这可能会被粘贴或通过其他输入方法无意中规避。

下面的代码就是一个例子，应该在文档准备好后执行：

var frm = document.getElementById('myform');

if (frm.email.type === 'text') {
    frm.onsubmit = function () {
        if (/\s/.test(frm.email.value)) {
            // Tell your user the field is invalid here, e.g.
            frm.email.className = 'invalid';

            // Prevent form submission
            return false;
        }
    }
}

工作演示：http: //jsfiddle.net/hgc7C/

不要忘记这不能替代服务器端表单验证。

Answer 3

是的，可以使用 javascript/JQuery。

如果您希望所有文本框都使用它，请执行以下操作。

$(function() {
    $('.formfield input[type=text]').on('keypress', function(e) {
        if (e.which == 32)
            return false;
    });
});

如果您希望它用于特定的文本框，则将 id 添加到文本框输入并替换.formfield input[type=text]为#textBoxId