気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
Javascriptを使えば可能です。
改行なしの場合、改行1回の場合、改行2回の場合など
それぞれの場合に応じたclassを用意しそのclassを付けたり外したりすることで実現出来ます。
下記コードをコピペすると多分動きます。
確認OS
mac
確認ブラウザ
safari
firefox
chrome
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet"> 9 <style> 10 .a { 11 font-family: 'Kosugi', sans-serif; 12 resize: none; 13 font-size: 18px; 14 width: 190px; 15 height: 20px; 16 padding: 10px; 17 line-height: 20px; 18 } 19 20 .twoLines { 21 height: 40px; 22 } 23 24 .threeLines { 25 height: 60px; 26 } 27 28 .fourLines { 29 height: 80px; 30 } 31 </style> 32</head> 33 34<body> 35 <textarea name="a" class="a"></textarea> 36 <script> 37 const textarea = document.getElementsByTagName("textarea")[0]; 38 textarea.addEventListener("input", () => { 39 const text = replaceBr(textarea.value); 40 const target = event.currentTarget; 41 numOfLine(countBr(text), countLen(countBr(text), text), target); 42 }); 43 44 const replaceBr = (value) => { 45 return value.replace(/\r\n/g, '\n').replace(/\r/g, '\n'); 46 } 47 48 const countBr = (text) => { 49 const count = (text.match(/\n/g) || []).length; 50 switch (count) { 51 case 0: 52 return 0; 53 break; 54 case 1: 55 return 1; 56 break; 57 case 2: 58 return 2; 59 break; 60 case 3: 61 return 3; 62 break; 63 default: 64 return 4; 65 break; 66 } 67 } 68 69 const countLen = (br, text) => { 70 switch (br) { 71 case 0: 72 return countVal(text); 73 break; 74 case 1: 75 return countVal(text.split('\n')[1]); 76 break; 77 case 2: 78 return countVal(text.split('\n')[2]); 79 break; 80 case 3: 81 return countVal(text.split('\n')[3]); 82 break; 83 default: 84 return 0; 85 break; 86 } 87 } 88 89 const countVal = (text) => { 90 let count = 0; 91 for (let i = 0, maxLen = text.length; i < maxLen; i++) { 92 const chr = text[i]; 93 if (chr.match(/\n/)) { 94 count += 0; 95 } else if (!chr.match(/[^\x01-\x7E]/) || !chr.match(/[^\uFF65-\uFF9F]/)) { 96 count += 0.5; 97 } else { 98 count += 1; 99 } 100 } 101 return count; 102 } 103 104 const numOfLine = (br, len, target) => { 105 let num = 0; 106 if (len <= 10) { 107 num = br + 1 108 } 109 110 if (len > 10 && len <= 20) { 111 num = br + 2 112 } 113 114 if (len > 20 && len <= 30) { 115 num = br + 3 116 } 117 118 if (len > 30) { 119 num = br + 4 120 } 121 judgeLine(num, target); 122 } 123 124 const judgeLine = (num, target) => { 125 if (num == 1) { 126 target.classList.remove("twoLines"); 127 target.classList.remove("threeLines"); 128 target.classList.remove("fourLines"); 129 } 130 if (num == 2) { 131 target.classList.add("twoLines"); 132 target.classList.remove("threeLines"); 133 target.classList.remove("fourLines"); 134 } 135 if (num == 3) { 136 target.classList.add("threeLines"); 137 target.classList.remove("fourLines"); 138 } 139 if (num > 3) { 140 target.classList.add("fourLines"); 141 } 142 } 143 </script> 144</body> 145 146</html>
投稿2020/08/14 04:14
編集2020/08/14 05:46総合スコア1373
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/14 04:23
2020/08/14 04:56
2020/08/14 05:31
2020/08/14 05:35
2020/08/14 06:01 編集
2020/08/14 05:53
2020/08/14 06:02
2020/08/14 06:04
2020/08/14 06:22
2020/08/14 06:59
2020/08/14 07:49