</strong></p> <p><textarea> 内でのテキストの書式設定の実装要素はプレーン テキストのキャプチャによく使用され、スクロールバーなどの固有の機能を提供します。ただし、<spans> を使用してテキストの特定のセクションをどのようにフォーマットできるかという疑問が生じます。 <textarea> 内?</p> <p><strong>チャレンジ:</strong></p> <p>標準の <textarea>要素は、<spans> 内のテキスト書式設定をネイティブにサポートしません。この制限は、リッチ テキスト編集機能を必要とするシナリオでは困難になる可能性があります。</p> <p><strong>解決策:</strong></p> <p><textarea> のスクロールバー機能を利用するのが便利に思えるかもしれませんが、リッチ テキスト コンテンツを管理するには、より汎用性の高いアプローチを採用することをお勧めします。この目的のために、<div> を使用して「偽の」テキストエリアを作成することをお勧めします。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><div></pre><div class="contentsignin">ログイン後にコピー</div></div> <p>このアプローチは、より優れたカスタマイズ機能を提供し、最新の Web 開発実践に適合し、リッチ コンテンツではなくプレーン テキストの処理を目的とした textarea 要素の期待される動作を維持します。 .</p> <p>偽のテキストエリアでスクロール機能を実現するには、次の CSS プロパティを適用します。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>#fake_textarea { overflow: auto; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>Forフォーム送信とのシームレスな統合により、非表示の入力フィールドを作成して、偽のテキストエリアから書式設定されたテキスト コンテンツをキャプチャすることが可能です。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><input type="hidden"></pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$('#your_form').submit(function() { $('#fake_textarea_content').val($('#fake_textarea').html()); });</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>このメソッドを採用することで、目的のフィールドを活用することが可能になります。標準の textarea 要素のように見えるテキスト形式のオプションを使用して、元の <textarea> の制約を緩和します。実装。</p>
