textareaフィールドの文字数制限-長所と短所、およびベストプラクティス？
一部のフォームフィールドには文字制限があります。データエントリの現在のサイズを反映する必要があるのか、それとも、そのサイズを超えてデータエントリをハード制限して禁止するのかについて議論しています。
HTMLでは、単純な<input>要素に、それ以上の入力を禁止するmaxlength属性を含めることができますが、<textarea>には組み込みオプションがありません。 <textarea>の文字制限は、JavaScriptを介して簡単に設定できます。
Twitterは残りの使用可能な文字を表示し、それ以上の文字を入力できるようにしますが、エラーとして表示します（アクションボタンを無効にします）。
限られたフィールドで許可されている文字数を積極的に示し、残りの文字数を示しています。ユーザーが制限を超えると、インラインフォームの無効化メッセージが表示されます。
反対の議論は、ユーザーが小さな数字の更新に気付かないこと、そしてユーザーがトリミングする必要がある何かを入力するのに多大な労力を費やすことになるかもしれないということです。
これらのキャラクターカウンターを使用することの長所と短所は何ですか？
テキストがない場合は、メッセージに最大文字数を示すだけにします（残りの数については触れません）。
入力すると、残りの文字数が灰色から黒に変わります（非常に微妙な表示）
制限に達したら、境界線を赤に変更します。余分なテキストを別の色にします。下に小さなエラーアイコンを表示し、余分な文字の数を示しますが、現在は赤で表示されています。 「ショック」になりすぎないように、赤みを数秒でフェードインさせることができます。
過剰なテキストの色分けにより、ユーザーは過剰がどれだけあるかを確認できます。私はいつも私のテキストのどれだけが実際に過剰な量であるかを推測しなければならないことは面倒であり、それを明確にマークしておくのはいいことです。
ただし、入力できる実際の文字数を、最大値として表示されている実際の文字数に制限しないでください。これは、災害地域です。言いたいことの流れを終えて編集できるのはいつでも良いことです。
色付けされたテキストは、番号を見る必要がなく、フィードバックがコンテキスト内ですぐに表示されるため、編集中のプロセスに最適です。制限を下回ったらすぐに、すべての赤いビットを削除します。
Jon Wが Digsby について言及しました-ダウンロードして確認してください-これがDigsbyのTwitterアプリのスクリーンショットで、余分なテキストの背景を赤に、テキストを白に変更しています。それは目にはビット厳しいですが、テキストの形式が変化するのと同じ基本原理です。
いつものように、文字数制限を誰かに通知することと、必要以上の情報を誰かに迷惑をかけることとの間のトレードオフです。
私は解決策は必要なときに情報をより明確にするですが、必要でないときはより微妙だと思います。これを行う方法はいくつかありますが、私が試みる1つの方法は、フィールドの背景を変更し、そのときのエラーメッセージのみを表示することです。人々は、あまり微妙でないと変化に気づきます。
ただし、200文字のみを入力するように制限しないでください（それが制限である場合）。タイプを増やし、多すぎる場合は編集します。
考慮すべきことの1つは、大量のコンテンツが入力されるフィールド（つまり、140文字を超える）の場合、ユーザーが別の場所にコンテンツを作成し、このフィールドに貼り付けたい可能性があることです。彼らがこれをするのを妨げないでください。コンテンツに貼り付けてから、サイズを編集できるようにします。
コンテンツ領域のテキストのstyleを修正して、制限に達したときに赤に変更するだけでなく、制限に近づくにつれて色/コントラストを変更することを検討できます。これにより、ユーザーは制限に近づいているという警告が表示されます。
最高の答えは素晴らしいですが、これについて別のアイデアを共有したいと思いました。私はこれを裏付ける研究やデータがないので、他の人がこれが使える/良いアイデアだと思っているかどうか知りたいです：
「進行状況バー」のような右または下の色付きのバーは、入力された相対テキストの量を示します。ある時点までは緑色で、限界に近づくと黄色になり、限界に達すると赤になります。 UIのビープ音（ただし、制限に達するたびに1回だけ）。ツールチップが変更され、文字数の制限を超えていることが示されます。標準の「エラーの波線」（スペルチェックの波線とは異なる色）により、制限を超えている文字が識別されます。
これはより「アンビエント」であり、画面の不動産やユーザーの注意を個別のラベルとしてあまり取り上げません。