1. ホーム
  2. ジャバスクリプト

[解決済み】textareaの異常な形状?

2022-04-03 22:50:35

質問

通常、テキストエリアはこのような長方形か正方形です。

でも、例えばこんな風に、カスタム形状のテキストエリアが欲しいんです。

どうしてこんなことが可能なのか?

どのように解決するのですか?

はじめに

まず、他の記事で提案されているように、多くの解決策があります。CSS3のプロパティを必要としないので、現在(2013年)最も多くのブラウザに対応できるのはこの方法だと思います。ただし、この方法は をサポートしていないブラウザでは contentdeditable は、注意してください。

divを使った解決方法 contenteditable

が提案するように ゲッツ を使用すると、divに contenteditable を作成し、その上に何らかのdivを配置して整形します。ここでは、メイン div の左上と右上に 2 つのブロックをフロートさせる例を示します。

ご覧のように ボーダーで少し遊ぶ というのは、あなたの投稿で要求されたのと同じ結果にしたい場合です。メインの div には、すべての面に青いボーダーが表示されています。次に、赤いブロックをメイン div の上部のボーダーを隠すように貼り付け、特定の辺にだけボーダーを適用する必要があります ( 下と左 は右のブロック。 下と右 は左側)。

その後、Javascriptでコンテンツを取得するには、" 投稿 例えばボタンが押されたときなどです。あと、残りのCSSも処理できると思います( font-size , color など) :)

フルコード・サンプル

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
}

.parent {
  height: 300px;
  width: 500px;
}
<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>