###実現したいこと
入力枠の高さ調整で、素敵な方法を探しています。
下記コードのようにしてtextareaをdivにコピーしているのですが、『入力の前後で同じ高さにしたい』です。
つまり、『textareaとdivの両方について、「入力前」と「入力後の1行目」で同じ高さにしたい』ということです。
みなさまのアイディアを頂戴できませんでしょうか?
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行目の調整だけお伺いしたいと思います。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/13 01:53