質問編集履歴

5

2021/05/30 12:34

投稿

dakeo
dakeo

スコア7

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  rowsは1から始まり、改行は3行まで(つまりrows=3まで)で、4行以降の行からスクロールバーが表示されるような仕組みです。
10
10
 
11
- 行を増やす処理は上手く行ったのですが、行の1文字まで消すと行が減るようにしたいです。
11
+ 行を増やす処理は上手く行ったのですが、行の1文字まで消すと行が減るようにしたいです。
12
12
 
13
13
  やり方をご教授願いたいです。
14
14
 

4

CSS,jQueryの一部コード

2021/05/30 12:34

投稿

dakeo
dakeo

スコア7

test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,8 @@
42
42
 
43
43
  <textarea class="input_comment" rows="1"></textarea>
44
44
 
45
+ <input type="submit" value="&#xf044; 書き込む" class="fas">
46
+
45
47
  </form>
46
48
 
47
49
  </body>
@@ -54,9 +56,53 @@
54
56
 
55
57
  ```CSS
56
58
 
59
+ body {
60
+
61
+ background-color: #ccc;
62
+
63
+ }
64
+
65
+
66
+
67
+ form {
68
+
69
+ display: flex;
70
+
71
+ }
72
+
73
+
74
+
57
75
  textarea.input_comment {
58
76
 
59
- font-size: 20px;
77
+ font-size: 18px;
78
+
79
+ padding: 10px;
80
+
81
+ border-radius: 3px;
82
+
83
+ border-right:none;
84
+
85
+ border-left:none;
86
+
87
+ border-top:none;
88
+
89
+ outline: none;
90
+
91
+ resize: none;
92
+
93
+ }
94
+
95
+
96
+
97
+ input[type="submit"].fas {
98
+
99
+ background: #CC3366;
100
+
101
+ color: #FFDDFF;
102
+
103
+ padding: 10px 5px;
104
+
105
+ align-items: center;
60
106
 
61
107
  }
62
108
 

3

2021/05/30 10:14

投稿

dakeo
dakeo

スコア7

test CHANGED
@@ -1 +1 @@
1
- jQueryでHTMLのtextarea要素のrows属性の値を、改行と同時に動的に書き換えるにはどうすればよいでしょうか?
1
+ jQueryでHTMLのtextarea要素のrows属性の値を、動的に書き換える方法
test CHANGED
@@ -1,6 +1,6 @@
1
1
  タイトル通りです。
2
2
 
3
- jQueryでHTMLのtextarea要素のrows属性の値を、改行と同時に動的に書き換える方法を教えてください。
3
+ jQueryでHTMLのtextarea要素のrows属性の値を、動的に書き換える方法を教えてください。
4
4
 
5
5
 
6
6
 
@@ -8,15 +8,15 @@
8
8
 
9
9
  rowsは1から始まり、改行は3行まで(つまりrows=3まで)で、4行以降の行からスクロールバーが表示されるような仕組みです。
10
10
 
11
+ 行を増やす処理は上手く行ったのですが、行の1文字まで消すと行が減るようにしたいです。
11
12
 
12
-
13
- 一応自分で調べながら実装してみですが、いまいち挙動が理解できない部分がございました
13
+ やり方をご教授願いです。
14
14
 
15
15
 
16
16
 
17
17
  以下、コードを記載いたします。
18
18
 
19
- コード記載後、具体的にわからなかった部分をご説明させていただきますので、ご回答いただけますと幸いです。
19
+
20
20
 
21
21
 
22
22
 
@@ -76,13 +76,15 @@
76
76
 
77
77
  .on('change keyup keydown paste cut', function(){
78
78
 
79
- if ($(this).attr("rows") < 3) {
79
+ while ($(this).outerHeight() < this.scrollHeight) {
80
80
 
81
- while ($(this).outerHeight() < this.scrollHeight) {
81
+    if ($(this).attr("rows") == 3) {
82
+
83
+     break;
84
+
85
+    }
82
86
 
83
87
  $(this).attr("rows", default_row++)
84
-
85
- }
86
88
 
87
89
  }
88
90
 
@@ -94,26 +96,10 @@
94
96
 
95
97
 
96
98
 
97
-
98
-
99
- 一応これで問題なく動くことにくのですが、jQueryに関して2点ほ試したことがございまして、それに関して質問がございます
99
+ これで行を増やす処理上手行ったのですが、行を減らす処理をう書けばよのかわかりせん
100
100
 
101
101
 
102
102
 
103
- ■試し
103
+ ご教授いだけます助かります。
104
104
 
105
-
106
-
107
- ①if文とwhile文の書く順番を逆にすると、見た目上は問題なく動作しますが、なぜかブラウザが再読み込みできなくなります。恐らくですが、無限ループに陥ってしまいます。一度改行した時点で、whileはfalseになるはずなのに、どうしてこのようなことが起こってしまうのでしょうか?
108
-
109
-
110
-
111
- ②while文はifに変えても問題なく動作しそうですが、textareaに何も入力していない状態でいきなりエンターキーを押して改行すると、なぜか最初の1回目はrowsの値が増えず、2回目を押すとrowsが3になってしまいます。(つまり、1回目はtextarea内での改行が行われるだけで行数は増えず、2回目のエンターキーで1度に2行分行が追加される。)普通の文字入力では、問題なく1行目を終えたところで、2行目が追加されます、(rowsは2)whileのときは問題なく動作したにもかかわらず、どうしてifに変えるとこのようなことが起こってしまうのでしょうか?
112
-
113
-
114
-
115
- 以上の2点がどうしても理解できません。
116
-
117
- どうかご回答いただけますと非常に助かります。
118
-
119
- よろしくお願いします。
105
+ どうかよろしくお願い致します。

2

2021/05/30 10:05

投稿

dakeo
dakeo

スコア7

test CHANGED
File without changes
test CHANGED
@@ -108,7 +108,7 @@
108
108
 
109
109
 
110
110
 
111
- ②while文はifに変えても問題なく動作しそうですが、textareaに何も入力していない状態でいきなりエンターキーを押して改行すると、なぜか最初の回目は改行され回目を押すとrowsが3になってしまいます。(つまり、回目は何も起こらず、回目に1度に2回行される。)普通の文字入力では、問題なく行目を終えたところで、行目に改行します、(rowsは2)whileのときは問題なく動作したにもかかわらず、どうしてifに変えるとこのようなことが起こってしまうのでしょうか?
111
+ ②while文はifに変えても問題なく動作しそうですが、textareaに何も入力していない状態でいきなりエンターキーを押して改行すると、なぜか最初の1回目はrowsの値が増え、2回目を押すとrowsが3になってしまいます。(つまり、1回目はtextarea内での改行が行われるだけで行数は増えず、2回目のエンターキーで1度に2行分行が追加される。)普通の文字入力では、問題なく1行目を終えたところで、2行目が追加されます、(rowsは2)whileのときは問題なく動作したにもかかわらず、どうしてifに変えるとこのようなことが起こってしまうのでしょうか?
112
112
 
113
113
 
114
114
 

1

2021/05/29 01:27

投稿

dakeo
dakeo

スコア7

test CHANGED
File without changes
test CHANGED
@@ -104,7 +104,7 @@
104
104
 
105
105
 
106
106
 
107
- ①if文とwhile文の書く順番を逆にすると、見た目上は問題なく動作しますが、なぜかブラウザが再読み込みできなくなります。恐らくですが、無限ループに陥ってしまいます。if文で条件から抜けるはずなのに、なぜこうしことが起こってしまうのでしょうか?
107
+ ①if文とwhile文の書く順番を逆にすると、見た目上は問題なく動作しますが、なぜかブラウザが再読み込みできなくなります。恐らくですが、無限ループに陥ってしまいます。一度改行した時点で、whileはfalseになるはずなのに、うしのようなことが起こってしまうのでしょうか?
108
108
 
109
109
 
110
110