フォームのセキュリティ対策にも有効！HTMLとJavaScriptで入力制限を設定する方法

2024-04-07

HTMLにおける文字制限（Character Limit in HTML）

文字制限を設定できる要素

HTMLで文字制限を設定できる主な要素は以下の通りです。

<input>要素：テキスト入力フィールド
<textarea>要素：テキストエリア
<select>要素：ドロップダウンリスト
<option>要素：ドロップダウンリストのオプション

文字制限を設定するには、各要素にmaxlength属性を指定します。この属性には、許容される最大文字数を数値で指定します。

例：

<input type="text" maxlength="10">

上記の場合、テキスト入力フィールドには最大10文字まで入力できます。

文字制限の注意点

maxlength属性は、半角文字数でカウントされます。
全角文字は半角文字の2倍の文字数としてカウントされます。
日本語入力システムによっては、半角文字と全角文字が混在する場合があります。
文字制限を超えた文字を入力した場合、ブラウザによって挙動が異なる場合があります。

その他の文字制限設定方法

JavaScriptを使用して、動的に文字制限を設定することもできます。
CSSを使用して、文字制限を超えた文字を省略表示することもできます。

まとめ

HTMLで文字制限を設定するには、maxlength属性を使用します。この属性は、様々な要素に対して使用することができ、ユーザー入力を制限したり、デザイン上の理由から必要となる場合に役立ちます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字制限サンプル</title>
</head>
<body>
  <h1>氏名</h1>
  <input type="text" name="name" maxlength="20" required>
  <br>
  <h1>住所</h1>
  <textarea name="address" maxlength="100" required></textarea>
  <br>
  <input type="submit" value="送信">
</body>
</html>

JavaScript

const nameInput = document.querySelector('input[name="name"]');
const addressTextarea = document.querySelector('textarea[name="address"]');

// 入力文字数の制限
nameInput.addEventListener('input', () => {
  if (nameInput.value.length > 20) {
    nameInput.classList.add('error');
  } else {
    nameInput.classList.remove('error');
  }
});

addressTextarea.addEventListener('input', () => {
  if (addressTextarea.value.length > 100) {
    addressTextarea.classList.add('error');
  } else {
    addressTextarea.classList.remove('error');
  }
});

// 送信ボタン押下時の処理
document.querySelector('input[type="submit"]').addEventListener('click', () => {
  if (nameInput.value.length > 20 || addressTextarea.value.length > 100) {
    alert('文字制限を超えています。');
    return false;
  }
});

このコードでは、以下の処理を行います。

氏名入力フィールドには最大20文字、住所入力エリアには最大100文字まで入力できるよう、maxlength属性を設定しています。
JavaScriptを使用して、入力文字数が制限を超えている場合はエラーメッセージを表示します。
送信ボタン押下時に、入力文字数が制限を超えている場合は送信をキャンセルします。

maxlength属性とJavaScriptを組み合わせることで、より柔軟な文字制限設定が可能になります。

HTMLにおける文字制限設定のその他の方法

placeholder属性は、入力フィールドに表示されるプレースホルダーテキストを設定します。この属性を使用して、入力制限に関する情報をユーザーに提示することができます。

<input type="text" placeholder="最大10文字まで">

.text-limit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
}

.text-limit::after {
  content: "...";
}

上記の場合、.text-limitクラスが設定された要素は、幅100pxで省略表示され、末尾に "..." が表示されます。

const input = document.querySelector('input');

input.addEventListener('input', () => {
  if (input.value.length > 10) {
    input.classList.add('error');
  } else {
    input.classList.remove('error');
  }
});

上記の場合、入力文字数が10文字を超えると、入力フィールドにエラークラスが追加されます。

maxlength属性以外にも、placeholder属性、CSS、JavaScriptを使用して文字制限を設定することができます。それぞれの方法にはメリットとデメリットがあり、目的に合わせて使い分けることが重要です。

各方法の比較

方法	メリット	デメリット
`maxlength`属性	シンプルで使いやすい	入力時に制限が分かりにくい
`placeholder`属性	入力制限に関する情報をユーザーに提示できる	デザインが制限される
CSS	デザイン性の高い制限を設定できる	JavaScriptの知識が必要
JavaScript	動的な制限設定が可能	コード量が複雑になる