inputfrom 文字が多くなったらスタイルを変えたい

inputformに文字が入力されて文字数が多くなるまたはenterキーが押されたときには改行されて画像のような感じにしたいです。
どうしたらできるのでしょうか？
ご教授お願いしたいです。

行動規範の内容に同意します

回答1件

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

Jon_do

総合スコア1373

ktaaa

2020/08/14 04:23

ご回答ありがとうございます。 jsを使えばできることはわかっていたのですがどうやっていいかわからず質問しました。何か参考になるサイトなどがあれば教えて欲しいです

Jon_do

2020/08/14 04:56

回答に参考コード追記しました。

ktaaa

2020/08/14 05:31

ありがとうございます const textarea = document.getElementsByTagName("textarea")[0];の textareaの変数はどこで使われているのでしょうか？

ktaaa

2020/08/14 05:35

動かなかったです。reactでやっているからでしょうか？

Jon_do

2020/08/14 06:01 編集

何も書いてない空のhtmlファイルにコードをそのままペーストしたら動くようになってます。定数textareaはすぐ下の textarea.add〜で使ってます。

Jon_do

2020/08/14 05:53

ここでも使ってました。 const text = replaceBr(textarea〜

ktaaa

2020/08/14 06:02

import { FunctionComponent } from "react"; import { text } from "text.js"; const textarea = text; const Text: FunctionComponent = () => { return <textarea></textarea>; }; export default Text;

ktaaa

2020/08/14 06:04

text.jsのtextareaをtextに変更してファイルに読み込んで使おうと思ったのですが | export const text = document.getElementsByTagName("textarea")[0];のところで ReferenceError: document is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window.というエラーになってしまいました

Jon_do

2020/08/14 06:22

reactは使ったことがないのでよくわからのですが、 const textarea を textに変更したからではないでしょうか？素のJavascriptでもconst textarea を textに変更してしまうと const textはすぐ直下で使われているため textに書き換えるとエラーが発生します。

ktaaa

2020/08/14 06:59

textareaに直して読み込みましたが textarea' が宣言されていますが、その値が読み取られることはありません。ts(6133) インポート宣言が、'textarea' のローカル宣言と競合しています。ts(2440)というエラーが出てしまいます

Jon_do

2020/08/14 07:49

ローカル宣言と競合とあるので定数名が被っているのかもしれません。これ以上はそちらのソースファイルを見てみないことには私にはなんとも言えません。

行動規範の内容に同意します