わからないこと入力、textarea_html/css_WEB-ITnose

大学の最後の半年で社会を経験し、若いチームに出会う​​ことができてとても幸運です。大学に来たばかりのときに特定のプロジェクトに触れ、参加することができてとても幸運です。会社; 過去 6 か月間、少しずつ進歩している自分を見ることができてとても幸運です。私が混乱して途方に暮れていたときに、たくさんの無言の助けがあったことをとても幸運に思います。

---

昨日、コードをぼんやり眺めていたら、誰かが私に、私が書いたページのスタイルがめちゃくちゃだと言いました。プロジェクトはまだオンラインになっていないため、すぐに解決する必要があります。ページを見たとき、すべてのデータがバックエンドから取得され、テンプレートを介して挿入されているのが少し奇妙でした。他のデータが正常であるはずはなく、1 つだけが間違っています。そこで、すぐに要素を確認したところ、スタイルが崩れている部分の dom 構造が変更されており、そこに対応するデータが埋め込まれていたことがわかりました。そのデータには特殊文字が含まれており、HTML によってタグに解析されて変更されていました。私のドーム構造。問題はすぐに発見されました。解決方法は次のとおりです。

私はこれまでこのような状況に遭遇したことがなく、経験も浅かったので、最初の反応はテンプレートで innerText を使用することでした。そして、案の定、文字列に変換するとエラーが報告されました。しかし、それらは単なる文字列です (笑、私の無知をお許しください)。

よく考えてみると、この問題はインプットを使えば解決できると思います。これら 2 つのタグの使用によって引き起こされる問題について話しましょう...

バックグラウンドから取得されたデータ: "/::~/::B/::|/:8 -)/::< ;/::$/::X/::Z/::'(/::-|/::@" (マスターなら、これが WeChat の絵文字エンコーディングであることがわかります。分析については別途説明します。そのままページに載せます）

1.input

元々このデータをラップしていた div タグを input タグに変更し、css でスタイルを変更します

<input type='text' value='/::~/::B/::|/:8-)/::</::$/::X/::Z/::'(/::-|/::@' >

はありません目視で確認すると、データは正常に表示されており、DOM も乱れていません。しかし、この時点で問題が発生します。テキストボックスは自動的に折り返されません（私はずっと前にこれを忘れていたことが判明しました）

入力行の折り返しを検索しようとしましたが、折り返す方法が見つかりませんでした。 textarea は複数行を実現するために使用できます (どのマスターが私をガイドできるか教えてください。とても感謝します~)

2. textarea

そこで、思い切って入力を textarea に変更し、CSS を通じてそのスタイルを変更しました。

<textarea>/::~/::B/::|/:8-)/::</::$/::X/::Z/::'(/::-|/::@</textarea>

タグ内のコンテンツは非常に長いため、すぐに問題が発生します。 1. テキスト コンテンツが長すぎると、スクロール バーが表示されます。 2. 高さが調整されません。

これらはすべて私が知っていることです、以前は需要がなかったので、何も問題がないと思っていましたが、今回はそれを解決する必要があるようです〜

私の限られた知識では、もちろんそれはそうです。 overflow:auto でしたが、効果はありませんでした

もちろん、Sou Sou Sou...

この質問に関しては、いくつかの回答が見つかりました。ここをクリックしてください...

より良い解決策も見つけました。解決策については、ここをクリックしてください。

これらの問題を詳しく見てみると、同じ方向からさまざまな視点が得られるのは非常に興味深いです。この 2 つのリンクをここに載せておきます。おそらく、見るたびに何か新しいことが得られるでしょう。