输入表单中不允许有空白字符/空格

Not allow a blank character / space in a input form

本文关键字：字符 空格 空白 表单 不允许 输入      更新时间：2023-09-26

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

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

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

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

使用 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/

不要忘记，这不是服务器端表单验证的替代品。

是的，使用 javascript/JQuery 是可能的。

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

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

如果要将其用于特定文本框，请将 id 添加到文本框输入中，并将.formfield input[type=text]替换为#textBoxId

相关文章：