ホーム>source

以下のような入力フォームで空白文字/スペースを許可しないことは可能ですか?

<前>ウィズウィズ <input type="text" value="" maxlength="30" name="email" class="formfield w0">
あなたの答え
  • 解決した方法 # 1

    このフィドルを確認してください。関連コード:

    ウィズウィズ
    
    ウィズウィズ
    

  • 解決した方法 # 2

    HTML5の拡張入力タイプを使用して制約検証を適用します。これにより、最新のブラウザーで無効なメールを含むフォームが送信されるのを防ぎます。

    <前>ウィズウィズ

    古いブラウザでは、値が無効と見なされるとデフォルトで「テキスト」になるため、入力のタイプが「メール」ではないことを検出できます。スペースキーのデフォルトのアクションを防止するのではなく、フォームの送信をブロックすることをお勧めします。これは、貼り付けや他の入力メソッドを介して誤って回避される可能性があります。

    次のコードはこの例であり、ドキュメントの準備が整った後に実行する必要があります。

    <前>ウィズウィズ ウィズウィズ

    これはサーバー側のフォーム検証の代わりにはならないことを忘れないでください。

  • 解決した方法 # 3

    はい、javascript/JQueryを使用することで可能です。

    すべてのテキストボックスで使用する場合は、以下のようにします。

    <前>ウィズウィズ

    特定のテキストボックスに必要な場合は、テキストボックス入力にIDを追加し、 $(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" />

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

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ android - MPAndroidChart:PieChart onValueSelectedが呼び出されない