HTML では、通常、ユーザーはテキストエリアの右下隅をドラッグしてサイズを変更できます。ただし、テキスト フィールドのサイズを固定するために、この手動のドラッグ動作を無効にしたい場合があります。これを実現するには、CSS のサイズ変更プロパティを使用します。
具体的な手順は次のとおりです。
HTML ファイル内で無効にする必要があるテキストエリア要素 (textarea) を見つけます。
CSS スタイルをテキスト フィールド要素に追加し、resize 属性を none に設定します。これにより、ユーザーはテキスト フィールドをドラッグしてサイズを変更できなくなります。
簡単な例を次に示します。
<!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>ドキュメント</title>
<スタイル>
テキストエリア {
size: none /* ユーザーが手動でドラッグしてサイズ変更できないようにします */
}
</スタイル>
</head>
<本文>
<textarea name="" id=""cols="30" rows="10">これはテキストエリアのコンテンツです</textarea>
</body>
</html>上の例では、 textarea要素にresize: none;スタイルを設定しているため、ユーザーはドラッグによってサイズを変更できません。
上の例では、textarea 要素にsize: none; スタイルを設定しているため、ユーザーはドラッグによってサイズを変更できません。
このアプローチはほとんどの最新ブラウザで効果的に機能しますが、互換性を確保するには、実際の展開前に徹底的にテストすることが最善であることに注意してください。さらに、サイズ変更属性は CSS3 の機能であるため、一部の古いブラウザではサポートされない場合があります。これらのブラウザをサポートする必要がある場合は、他の方法の使用を検討するか、ダウングレード オプションを提供する必要がある場合があります。
ユーザーの手動ドラッグを禁止する HTML テキスト フィールドの設定方法に関するこの記事はこれで終わりです。HTML によるユーザーの手動ドラッグの禁止について詳しくは、downcodes.com で以前の記事を検索するか、引き続き以下の関連記事を参照してください。今後も downcodes.com をさらに強化していきます!