質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

299閲覧

textareaの高さをCSSできちんとそろえたい

gonsy

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/05/03 11:57

###実現したいこと
入力枠の高さ調整で、素敵な方法を探しています。

下記コードのようにしてtextareaをdivにコピーしているのですが、『入力の前後で同じ高さにしたい』です。

つまり、『textareaとdivの両方について、「入力前」と「入力後の1行目」で同じ高さにしたい』ということです。

みなさまのアイディアを頂戴できませんでしょうか?

JSfiddle

html

1<head> 2<style> 3figure { 4 position: relative; 5} 6textarea { 7 caret-color: black; 8 color: transparent; 9 position: absolute; 10 z-index: 2; 11 border: none; 12 width: 100%; 13 background: transparent; 14 word-break: break-all; 15 resize: none; 16 font-size: 15px; 17 padding: 5px 10px; 18} 19div { 20 width: 100%; 21 position: relative; 22 word-break: break-all; 23 font-size: 15px; 24 z-index: 1; 25 padding: 5px 10px; 26 border: 1px solid gray; 27} 28p { 29 margin: 0; 30} 31span.overed { 32 color: red; 33 white-space: pre-wrap; 34} 35span.within { 36 color: black; 37 white-space: pre-wrap; 38} 39</style> 40 41<script> 42$('textarea').on("input", function(){ 43 44 const that = $(this); 45 const inp = that.val(); 46 const lim = 5; 47 const clone = that.next('div'); 48 49 if( inp.length > lim ){ 50 const inp_base = inp.substr( 0, lim ); 51 const inp_over = inp.slice(lim); 52 clone.html('<p><span class="within">'+inp_base+'</span>'); 53 clone.find('p').append('<span class="overed">'+inp_over+'</span>'); 54 }else{ 55 clone.html('<p><span class="within">'+inp+'</span>'); 56 } 57 58}); 59</script> 60 61</head> 62 63<body> 64 65<figure> 66 <textarea></textarea> 67 <div><p></p></div> 68</figure> 69 70</body>

###ためしたこと
height:●●px; のようにして高さを指定しても、フォントによって適切な高さは変わってしまいますし。

height:calc(15px + 10px); のようにしてfont-sizeとpaddingを加えた高さにすれば出来そうに思ったのですが、なぜか入力した後の方が高くなりますし。

識者のみなさまからのご意見を頂戴できましたら幸いです。
宜しくお願い致します。

###補足情報
ちなみにtextareaの高さですが、2行目以降は自動的に高くなるように別のJSでやっていますので、今回は1行目の調整だけお伺いしたいと思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

同じ位置に表示したいということでしょうか?
div に適用している border の分と、デフォルトスタイルシートを考慮して一致させればいいでしょう。

CSS

1textarea { 2 margin: 0; 3 border: 1px solid transparent; 4 font-family: unset; 5}

投稿2019/05/13 01:43

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gonsy

2019/05/13 01:53

borderの処理も必要ですね。ありがとうございました。
guest

0

ベストアンサー

html

1<textarea rows="1"></textarea>

textarea 要素で rows 属性に 1 を指定して、初期状態では1行で表示されるようにしておきます。

css

1textarea, div { 2 min-height: calc(1.6em + 10px); 3 line-height: 1.6; 4}

そして、textareadiv 要素両方に同じ line-height を指定し、min-height プロパティに line-height + 上下の padding 値を足したものを指定すると、実現できると思います。

ただ、textarea 要素が何行入力しても1行の高さのままなので、JavaScript で高さを変更したりするとよいかもしれません。

投稿2019/05/10 12:48

Takamoso

総合スコア248

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gonsy

2019/05/13 01:53

おみごと!ありがとうございました!
guest

0

不可能なのでcontentEditableを使用したほうが良いです。

HTML

1<div contentEditable="true">You can edit!</div>

投稿2019/05/05 07:20

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問