質問編集履歴
14
質問を変えた
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
v-text-fieldをカスタムするには
|
test
CHANGED
|
@@ -1,27 +1,10 @@
|
|
|
1
1
|
vuejsで名前とパスワードのログインページを作成しました。uiはvuetifyを使用しています。ページにアクセスするとautocompleteによって自動で文字が入力されます。v-text-fieldに指定したlabelの文字とautocompleteによって入力された文字が重なって表示され非常にかっこ悪いです。ページが表示された後にwindowのどこでもいいからクリックするとlabelの文字が上にあがって小さくなるため重なりは解消されます。
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
いろいろ調べましたがautocompleteはoffにできません。offにする方法を見つけたとしてもいずれ対応されてしまいます。
|
|
4
4
|
|
|
5
|
-
なのでこの重なりを解消するためにコードからbodyをクリックしようと思いました。
|
|
5
|
+
なのでこの重なりを解消するためにコードからbodyをクリックしようと思いました。しかし、Event.isTrustedによってコードからのクリックではv-text-fieldの文字の重なりを解消できないと分かりました。
|
|
6
|
-
vuejsの一番上のタグは<div id ="app">なので下記のようにしました。
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
var elm = document.getElementById('app');
|
|
10
|
-
window.onload = function() {
|
|
11
|
-
setTimeout(function(){
|
|
12
|
-
var evt = new Event("click", {"bubbles":true, "cancelable":false});
|
|
13
|
-
elm.dispatchEvent(evt);
|
|
14
|
-
},1000);
|
|
15
|
-
}
|
|
16
|
-
elm.onclick=()=>alert('appがクリックされました。')
|
|
17
|
-
```
|
|
18
|
-
コードの通りappがクリックされましたとalertが出たのでコード上ではクリックされたことになります。しかし重なりは解消されませんでした。ということは実際のクリックとコードからのクリックは違うということになるのでしょうか。もちろん実際にappをクリックしてもalertがでます。違うのはv-text-fieldの文字の重なりがコードからのクリックでは解消されないことです。実際にクリックすると解消されます。
|
|
19
|
-
実際にクリックした場合と同じようなイベントを起こすにはどうすればいいでしょうか？
|
|
20
|
-
|
|
21
|
-
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。となると他の方法でこの重なりをどうにかするしかありません。
|
|
22
|
-
|
|
23
|
-
node_modules/vuetify/の階層内でVTextFieldと言うフォルダが何個かあります。どれが実際に使われているファイルかconsole.log("これ")を入れて確認したのですがまったくなにも表示されません。当然使われていないファイルにconsole.logを入れているわけですが、どのファイルが実際に使われているかわかるでしょうか?
|
|
7
|
+
後はv-text-fieldをカスタムする以外にありません。v-text-fieldのラベルの文字はv-text-fieldの中に最初大きく表示されています。クリックすると左上に移動して文字も小さくなります。これで文字の重なりは解消されるので最初からラベルが左上に小さく表示されていればいいのですがvuetifyのsampleではそのようなv-text-fieldはありませんでした。このようなカスタムはそもそもできるのでしょうか?
|
|
24
8
|
|
|
25
9
|
|
|
26
10
|
|
|
27
|
-
|
13
質問を変更した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
|
|
21
21
|
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。となると他の方法でこの重なりをどうにかするしかありません。
|
|
22
22
|
|
|
23
|
+
node_modules/vuetify/の階層内でVTextFieldと言うフォルダが何個かあります。どれが実際に使われているファイルかconsole.log("これ")を入れて確認したのですがまったくなにも表示されません。当然使われていないファイルにconsole.logを入れているわけですが、どのファイルが実際に使われているかわかるでしょうか?
|
|
23
24
|
|
|
24
25
|
|
|
25
26
|
|
|
26
27
|
|
|
27
|
-
|
12
質問をまちがえた
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,13 +20,8 @@
|
|
|
20
20
|
|
|
21
21
|
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。となると他の方法でこの重なりをどうにかするしかありません。
|
|
22
22
|
|
|
23
|
-
node_modules/vuetify/配下に下記3つのVTextFieldフォルダがあります。実際にはどのVTextFieldが使われているのでしょうか
|
|
24
|
-
src/components/VTextField
|
|
25
|
-
lib/components/VTextField
|
|
26
|
-
es5/components/VTextField
|
|
27
23
|
|
|
28
24
|
|
|
29
25
|
|
|
30
26
|
|
|
31
27
|
|
|
32
|
-
|
11
質問を変更した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,6 +20,10 @@
|
|
|
20
20
|
|
|
21
21
|
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。となると他の方法でこの重なりをどうにかするしかありません。
|
|
22
22
|
|
|
23
|
+
node_modules/vuetify/配下に下記3つのVTextFieldフォルダがあります。実際にはどのVTextFieldが使われているのでしょうか
|
|
24
|
+
src/components/VTextField
|
|
25
|
+
lib/components/VTextField
|
|
26
|
+
es5/components/VTextField
|
|
23
27
|
|
|
24
28
|
|
|
25
29
|
|
10
質問を変えた
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,16 +20,9 @@
|
|
|
20
20
|
|
|
21
21
|
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。となると他の方法でこの重なりをどうにかするしかありません。
|
|
22
22
|
|
|
23
|
-
node_modules/vuetify/src/components/VTextFieldフォルダがあります。
|
|
24
|
-
この中にあるVtextField.tsを見たらlabelPositionという関数がありました。
|
|
25
|
-
ラベルの移動はこの関数が使われているだろうと思いconsole.logで確かめたいと思いました。
|
|
26
|
-
実際に使われているのはvuetify.min.jsがあるnode_modules/vuetify/dist内のファイルだと思い試しにdistを削除してみましたが普通に使えてます。ということはdist内のファイルではなく他のファイルになりますがどれが使われているのでしょうか?
|
|
27
23
|
|
|
28
24
|
|
|
29
25
|
|
|
30
26
|
|
|
31
27
|
|
|
32
28
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
9
質問を追加した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
node_modules/vuetify/src/components/VTextFieldフォルダがあります。
|
|
24
24
|
この中にあるVtextField.tsを見たらlabelPositionという関数がありました。
|
|
25
25
|
ラベルの移動はこの関数が使われているだろうと思いconsole.logで確かめたいと思いました。
|
|
26
|
-
実際に使われているのはvuetify.min.jsがあるnode_modules/vuetify/dist内のファイルだと思い試しにdistを削除してみましたが普通に使えてます。な
|
|
26
|
+
実際に使われているのはvuetify.min.jsがあるnode_modules/vuetify/dist内のファイルだと思い試しにdistを削除してみましたが普通に使えてます。ということはdist内のファイルではなく他のファイルになりますがどれが使われているのでしょうか?
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
|
|
@@ -32,3 +32,4 @@
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
35
|
+
|
8
質問を変更した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -23,8 +23,12 @@
|
|
|
23
23
|
node_modules/vuetify/src/components/VTextFieldフォルダがあります。
|
|
24
24
|
この中にあるVtextField.tsを見たらlabelPositionという関数がありました。
|
|
25
25
|
ラベルの移動はこの関数が使われているだろうと思いconsole.logで確かめたいと思いました。
|
|
26
|
-
しかしtsファイルなのでコンパイルが必要です。
|
|
27
|
-
|
|
26
|
+
実際に使われているのはvuetify.min.jsがあるnode_modules/vuetify/dist内のファイルだと思い試しにdistを削除してみましたが普通に使えてます。なぜでしょうか?
|
|
28
27
|
|
|
29
28
|
|
|
30
29
|
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
7
質問を追加した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,4 +18,13 @@
|
|
|
18
18
|
コードの通りappがクリックされましたとalertが出たのでコード上ではクリックされたことになります。しかし重なりは解消されませんでした。ということは実際のクリックとコードからのクリックは違うということになるのでしょうか。もちろん実際にappをクリックしてもalertがでます。違うのはv-text-fieldの文字の重なりがコードからのクリックでは解消されないことです。実際にクリックすると解消されます。
|
|
19
19
|
実際にクリックした場合と同じようなイベントを起こすにはどうすればいいでしょうか？
|
|
20
20
|
|
|
21
|
-
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。となると他の方法でこの重なりをどうにかするしかありません。
|
|
21
|
+
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。となると他の方法でこの重なりをどうにかするしかありません。
|
|
22
|
+
|
|
23
|
+
node_modules/vuetify/src/components/VTextFieldフォルダがあります。
|
|
24
|
+
この中にあるVtextField.tsを見たらlabelPositionという関数がありました。
|
|
25
|
+
ラベルの移動はこの関数が使われているだろうと思いconsole.logで確かめたいと思いました。
|
|
26
|
+
しかしtsファイルなのでコンパイルが必要です。
|
|
27
|
+
これコンパイルしてどこにどのような形で配置すればいいか分かる方いますか?
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
6
その後の質問
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,4 +18,4 @@
|
|
|
18
18
|
コードの通りappがクリックされましたとalertが出たのでコード上ではクリックされたことになります。しかし重なりは解消されませんでした。ということは実際のクリックとコードからのクリックは違うということになるのでしょうか。もちろん実際にappをクリックしてもalertがでます。違うのはv-text-fieldの文字の重なりがコードからのクリックでは解消されないことです。実際にクリックすると解消されます。
|
|
19
19
|
実際にクリックした場合と同じようなイベントを起こすにはどうすればいいでしょうか？
|
|
20
20
|
|
|
21
|
-
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。
|
|
21
|
+
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。となると他の方法でこの重なりをどうにかするしかありません。プロの方はどうやっているのでしょうか。
|
5
その後の調べ
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,3 +18,4 @@
|
|
|
18
18
|
コードの通りappがクリックされましたとalertが出たのでコード上ではクリックされたことになります。しかし重なりは解消されませんでした。ということは実際のクリックとコードからのクリックは違うということになるのでしょうか。もちろん実際にappをクリックしてもalertがでます。違うのはv-text-fieldの文字の重なりがコードからのクリックでは解消されないことです。実際にクリックすると解消されます。
|
|
19
19
|
実際にクリックした場合と同じようなイベントを起こすにはどうすればいいでしょうか？
|
|
20
20
|
|
|
21
|
+
調べたところEvent.isTrustedが要のようです。結構説明しているサイトがありましたがisTrustedをtrueにするのは無理そうです。
|
4
質問を変更した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -15,5 +15,6 @@
|
|
|
15
15
|
}
|
|
16
16
|
elm.onclick=()=>alert('appがクリックされました。')
|
|
17
17
|
```
|
|
18
|
-
コードの通りappがクリックされましたとalertが出たのでコード上ではクリックされたことになります。しかし重なりは解消されませんでした。ということは実際のクリックとコードからのクリックは違うということになるのでしょうか。もちろん実際にappをクリックしてもalertがでます。違うのはv-text-fieldの文字の重なりがコードからのクリックでは解消されないことです。実際にクリックすると解消されます。
|
|
18
|
+
コードの通りappがクリックされましたとalertが出たのでコード上ではクリックされたことになります。しかし重なりは解消されませんでした。ということは実際のクリックとコードからのクリックは違うということになるのでしょうか。もちろん実際にappをクリックしてもalertがでます。違うのはv-text-fieldの文字の重なりがコードからのクリックでは解消されないことです。実際にクリックすると解消されます。
|
|
19
|
+
実際にクリックした場合と同じようなイベントを起こすにはどうすればいいでしょうか？
|
|
19
20
|
|
3
長ったらしいので短くした
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,26 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
みなさんたぶん分かっていると思うのですがautocompleteはoffにできません。offにする方法を見つけたとしてもいずれ対応されてしまいます。
|
|
4
4
|
|
|
5
|
-
なのでこの重なりを解消するためにコードからbodyをクリックしようと思いました。autocomplete後にクリックしなければならないのでwindow.onloadから1秒後にクリックするようにしました。
|
|
5
|
+
なのでこの重なりを解消するためにコードからbodyをクリックしようと思いました。autocomplete後にクリックしなければならないのでwindow.onloadから1秒後にクリックするようにしました。
|
|
6
|
+
vuejsの一番上のタグは<div id ="app">なので下記のようにしました。
|
|
6
7
|
|
|
7
|
-
vuejsの一番上のタグは<div id ="app">なので下記のようにしました。
|
|
8
|
-
これでクリックできてるでしょうか?
|
|
9
|
-
|
|
10
|
-
```javascript
|
|
11
|
-
window.onload = function() {
|
|
12
|
-
setTimeout(function(){
|
|
13
|
-
document.getElementById("app").click();//←これもダメ
|
|
14
|
-
//document.body.click();←これもダメ
|
|
15
|
-
},1000);
|
|
16
|
-
}
|
|
17
|
-
```
|
|
18
|
-
それとも実際のクリックとコードからのクリックでは何か違うのでしょうか。
|
|
19
|
-
|
|
20
|
-
下記コードでクリックされているか確認したところ'appがクリックされました。'とalertがでました。
|
|
21
|
-
ということは実際のクリックとコードからのクリックは違うということになりまか？
|
|
22
|
-
もちろん実際にappをクリックしてもalertがでます。
|
|
23
|
-
違うのはv-text-fieldの文字の重なりがコードからのクリックでは解消されないことです。
|
|
24
|
-
実際にクリックすると解消されます。
|
|
25
8
|
```javascript
|
|
26
9
|
var elm = document.getElementById('app');
|
|
27
10
|
window.onload = function() {
|
|
@@ -32,4 +15,5 @@
|
|
|
32
15
|
}
|
|
33
16
|
elm.onclick=()=>alert('appがクリックされました。')
|
|
34
17
|
```
|
|
18
|
+
コードの通りappがクリックされましたとalertが出たのでコード上ではクリックされたことになります。しかし重なりは解消されませんでした。ということは実際のクリックとコードからのクリックは違うということになるのでしょうか。もちろん実際にappをクリックしてもalertがでます。違うのはv-text-fieldの文字の重なりがコードからのクリックでは解消されないことです。実際にクリックすると解消されます。何が違うのでしょうか。その違いはどのプロパティでわかるのでしょうか。
|
|
35
19
|
|
2
誤字修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
vuejsで名前とパスワードのログインページを作成しました。uiはvuetifyを使用しています。ページにアクセスするとautocompleteによって自動で文字が入力されます。v-text-fieldに指定したlabelの文字とautocompleteによって入力された文字が重なって表示され非常にかっこ悪いです。ページが表示された後にwindowのどこでもいいからクリックするとlabelの文字が上にあがって小さくなるため重なりは解消されます。
|
|
2
2
|
|
|
3
|
-
みなさんたぶん分かっていると
|
|
3
|
+
みなさんたぶん分かっていると思うのですがautocompleteはoffにできません。offにする方法を見つけたとしてもいずれ対応されてしまいます。
|
|
4
4
|
|
|
5
5
|
なのでこの重なりを解消するためにコードからbodyをクリックしようと思いました。autocomplete後にクリックしなければならないのでwindow.onloadから1秒後にクリックするようにしました。しかし重なりは解消されません。クリックされてるのかどうかもわかりません。
|
|
6
6
|
|
1
その後確認したことを試した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -16,3 +16,20 @@
|
|
|
16
16
|
}
|
|
17
17
|
```
|
|
18
18
|
それとも実際のクリックとコードからのクリックでは何か違うのでしょうか。
|
|
19
|
+
|
|
20
|
+
下記コードでクリックされているか確認したところ'appがクリックされました。'とalertがでました。
|
|
21
|
+
ということは実際のクリックとコードからのクリックは違うということになりまか？
|
|
22
|
+
もちろん実際にappをクリックしてもalertがでます。
|
|
23
|
+
違うのはv-text-fieldの文字の重なりがコードからのクリックでは解消されないことです。
|
|
24
|
+
実際にクリックすると解消されます。
|
|
25
|
+
```javascript
|
|
26
|
+
var elm = document.getElementById('app');
|
|
27
|
+
window.onload = function() {
|
|
28
|
+
setTimeout(function(){
|
|
29
|
+
var evt = new Event("click", {"bubbles":true, "cancelable":false});
|
|
30
|
+
elm.dispatchEvent(evt);
|
|
31
|
+
},1000);
|
|
32
|
+
}
|
|
33
|
+
elm.onclick=()=>alert('appがクリックされました。')
|
|
34
|
+
```
|
|
35
|
+
|