div はテキストエリアの適応高さをシミュレートします_html/css

div はテキストエリアの適応高さをシミュレートします_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:21:53

オリジナル

961 人が閲覧しました

会社でプロジェクトに取り組んでいたとき、コメント行の数が増えると自動的に拡張できるコメントボックスを作成する必要があり、最初は textarea を使用して実装しようとしました。しかし、後で試してみたところ、テキストエリアは入力行数が増えてもテキストエリアの高さが上がらないことがわかり、ネットで助けを求めたところ、マスター Zhang Xinxu の「div」という記事を見つけました。 textarea テキストフィールドをシミュレートして、高さの調整を簡単に実現します。」という問題は、正常に解決されました。私の問題

コードは次のとおりです:

 1  1 <!DOCTYPE html> 2  2 <html lang="en"> 3  3 <head> 4  4     <meta charset="UTF-8"> 5  5     <title>div模拟textarea自适应高度le> 6  6     <style type="text/css"> 7  7         .test_box{ 8  8             width:500px; 9  9             min-height:200px;10 10             max-height:600px;11 11             _height:200px;/*兼容IE6浏览器*/12 12             margin:0 auto;13 13             padding:3px;14 14             outline:0;15 15             border:1px solid #e4e4e4;16 16             font-size:12px;17 17             word-wrap:break-word;/*用于英文文本自动换行，所有主流浏览器支持*/18 18             overflow-x:hidden;19 19             overflow-y:auto;20 20             -webkit-user-modify: read-write-plaintext-only;21 21         }22 22     </style>23 23 </head>24 24 <body>25 25     <div class="test_box" contenteditable="true">我是模拟textarea的div</div>26 26     <script type="text/javascript">27 27         if (typeof document.webkitHidden == "undefined") {28 28             // 非chrome浏览器阻止粘贴29 29             box.onpaste = function() {30 30                 return false;31 31             }32 32         }33 33     </script>34 34 </body>35 35 </html>

ログイン後にコピー

これまでに見たことのない属性が 1 つまたは 2 つあります:

-webkit- user-modify: 読み取り専用 | 読み取り-書き込み-平文のみ
読み取り専用コンテンツは読み取り専用です。読み書きコンテンツの読み書きが可能です。 read-write-plaintext-only コンテンツの読み書きは可能ですが、貼り付けたコンテンツのリッチテキスト形式 (テキストの色、サイズ、画像など) は失われます。コンテンツはプレーンテキストとして表示されます。

contenteditable 属性は、要素のコンテンツを編集できるかどうかを指定します。

true 要素の内容が編集可能であることを指定します。 false 要素の内容が編集できないことを指定します。

非常に実践的な経験をたくさん共有してくれた Xin 先生 (http://www.zhangxinxu.com/) に改めて感謝します。将来、彼のレベルに到達できたら、私も記事を書きたいと思っています。人類のために良いブログを共有してください、笑、まだ遠いですが、戦い続けてください〜