jquery - 複数の入力でスペースを許可しない方法は?

Question

3 つの入力フィールドがあり、スペースを許可しない短い jquery コードが必要です。

<input id='email' type='email' name='email' />
<input id='username' type='text' name='username' />
<input id='pwd' type='password' name='pwd' />

Answer 1

まず、3にクラスを追加しますinput tags

<input id='email' class='disallow' type='email' name='email' />
<input id='username' class='disallow' type='text' name='username' />
<input id='pwd' class='disallow' type='password' name='pwd' />

これがjQueryです：-

$(document).ready(function() {
    $('.disallow').keypress(function(e) {
        if(e.which === 32) {
            return false;
        }
    });
});

jsfiddle

Answer 2

これは、ユーザーがクリップボードから値を貼り付けることによってバイパスできない最初のソリューションです。これは、ユーザーがよく行うことです。

これは、ブラウザ拡張機能を使用してログイン/フォームに入力しているため、ユーザーがバイパスできない最初のソリューションです。

jQueryに言及したので、Validate Pluginを使用したフォーム検証はどうですか?

または、単純な検証が必要な場合は、submit イベントを使用してテストしてみてください。

$('form').on('submit', function () {
    var spaceTest = new RegExp('^[^ \t\r\n\v\f]*$');

    //loop through your desired form elements
    $(this).find('.disallow').each(function () {
        var $this = $(this),
            m = spaceTest.exec($this.val());
        // if it fails your test
        if (m === null) {
            // reject

        } else {
           // accept
        }
    });
});

フィドル