テキストエリアの入力制限を実装しよう！前編

2023.01.12 ノウハウ

ブログ

その他技術テキストエリア入力制限

01｜はじめに
02｜CSSで表示を整える
03｜おわりに

1. はじめに

こんにちは、新卒EGの黒澤です。

担当している某大型アパレル企業様のプロジェクトで「贈答用のメッセージをエンドユーザが自由に入力できるようにする」という開発を行ったのですが、意外とこれが曲者で詰まることが多かったです。。。

そのため今回はテキストボックスの入力制限の実装方法をご紹介します。

尚、仕様は以下とします。

・1行最大全角20文字まで入力可能(半角なら最大40文字)
・最大5行まで入力可能
・改行コードは文字数に含めない
・絵文字等の特殊文字は入力不可とする(C#で対応したため今回は触れない)

2. CSSで表示を整える


<style type="text/css">

textarea {
    font-family: 'ＭＳ ゴシック', 'Osaka-等幅';
    resize: none;
    overflow: hidden;
    white-space: break-spaces;
    line-break: anywhere;
}
</style>

1. font-family は等幅フォントをチョイス

等幅フォントというのは文字の幅を統一した書体のことです。

反対に幅の異なるフォントを「プロポーショナルフォント」と言います。

比較例）上段：プロポーショナルフォント、下段：等倍フォント
こんにちは, 世界！
0123456789
ABCDEFGHIJKLMNOPQLSTUVWXYZ

こんにちは, 世界！
0123456789
ABCDEFGHIJKLMNOPQLSTUVWXYZ

特にアルファベットの文字幅が大きく異なっているのが分かります。

「1行20文字」という制約を付けているので

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
いいいいいいいいいいいいいいいいいいいい

上記のように同じ20文字でここまで差が出てしまうのは頂けないですね…。

等倍フォントであればこのような事象は起こらないため、等倍フォントを使用します。

2. resize と overflow

resizeはエリアを自由に伸び縮みさせられる「つまみ部分」です。

overflow はエリアから文字がはみ出た場合にどう振る舞うかを指定できます。

リサイズすると「1行20文字まで」という制限が直感的に分かり辛くなってしまうため、none を指定して消しておきます。

最大行数は予め決まっているため、スクロールバーも消しておきます。

overflow: ○○ などはいくつか種類があるので興味があれば調べてみてください。

3. white-space

white-space は「スペース」をどう処理するかを指定できます。

pre-wrap で入力したスペースは改行こそされませんが、文字数は増えてしまうため、「1行20文字」という制限が困難になってしまいます…

white-space: break-spaces を使えば入力した通りになります。

4. line-break

アルファベットでいろんなパターンを入力すると分かるのですが、

単語が末尾に来ると「勝手に自動で改行しちゃう問題」が発生します。

上記はEnterキーで改行していないにも関わらず改行されてしまっています。

見やすくなるのでこれはこれで非常にありがたい機能なのですが、エンドユーザーの意思に関わりなく「勝手に」改行してしまうとクレームにつながったり、入力制限自体も上手くいかなくなる可能性があります。

そこで登場するのが line-break: anywhere です。

これは非常に強力で、何が何でも絶対に自動改行はしないぞというスタイルになります。

残すは「１行２０文字」「最大５行まで」をどう実装するかなのですが、

cols=”40″ や rows=”5″を指定するだけでは制御できません。（上のテキストエリアで実装済）

CSSではこれが限界なのでここからはJSで制御していくのですが…

今回はここまでです。

3. おわりに

CSSは環境によって「動く」「動かない」が存在します。

例えば Chromeというブラウザでは有効ですが、Safariというブラウザでは無効になってしまう、など。

サポートが終了しているInternetExplorerでは動かないことが多々あります。

なので動作確認をする際は必ず複数のブラウザで検証するようにしましょう！

動いていない場合はベンダープレフィックス(-webkit- や -moz-等)を付けると動くようになります。（-webkit-appearance: checkbox; とか）

次回はJSを使って入力制限をかけていきます。
是非ご覧ください！

テックメディア