Q&A
HTMLもご提示ください。
この度、Webページ内の特定のCSSセレクタ（inputタグ)に対して、マウスでクリックを行った際と同じ動作を実現したくコードを記述しております。
3種類の方法を行いましたが、実際にマウスでクリックした時のようにinputのtextエリアに対してクリックされた状態にはならず苦戦致しております。（カーソルが点滅して文字入力が可能となる状態の事となります。）
javascript
1document.querySelector('セレクタ名').focus(); 2document.querySelector('セレクタ名').click(); 3document.querySelector('セレクタ名').selected = true;
html
1<input autocapitalize="sentences" autocomplete="name" autocorrect="on" maxlength="50" name="name" spellcheck="true" type="text" dir="auto" data-focusable="true" class="r-30o5oe r-1niwhzg r-17gur6a r-1yadl64 r-deolkf r-homxoj r-poiln3 r-7cikom r-1ny4l3l r-1inuy60 r-utggzx r-vmopo1 r-1w50u8q r-1lrr6ok r-1dz5y72 r-1ttztb7 r-13qz1uu" value="">
上記以外の方法で、これを実現する方法をご存じの方がいらっしゃいましたらご教授頂けますと幸いです。
「クリックされた状態」ってそれはあくまでユーザーの操作であって起きてる現象は「フォーカス」ではないんですか？
<input autocapitalize="sentences" autocomplete="name" autocorrect="on" maxlength="50" name="name" spellcheck="true" type="text" dir="auto" data-focusable="true" class="r-30o5oe r-1niwhzg r-17gur6a r-1yadl64 r-deolkf r-homxoj r-poiln3 r-7cikom r-1ny4l3l r-1inuy60 r-utggzx r-vmopo1 r-1w50u8q r-1lrr6ok r-1dz5y72 r-1ttztb7 r-13qz1uu" value="">
こちらが対象としているinputタグのHTMLとなります。
マウスでクリック致しますと、入力個所にカーソルが点滅している状態となり文字入力が行えるのですが、上記３つの方法ですと入力個所にカーソルが点滅するという状態とならず困っております。
質問は編集できます。
こちらのコメント欄ではマークダウン使えませんし、デフォルト非表示なので目につきにくいです。
あとクラス名があまり規則性のない文字列になってますが、
何かしらWebフレームワークやテンプレートエンジン使ってますか？
了解致しました。編集させて頂きます。
クラス名についてですが、こちら私が制作しているサイトではなく他サイトとなっておりまして、何かしらのWebフレームワークやテンプレートを使用しているのかどうかは定かではございません。
まず「マウスでクリックを行った際の動作」を定義している部分を提示されないと何がしたいかわかりません。
ご指摘頂きましてありがとうございます。
マウスでテキストボックスをクリック致しますと、カーソルが点滅し文字の入力が可能となります。
こちら、編集から追記致します。わかりにくく申し訳ございません
querySelectorでHTML要素を取得する際にはidかclassを参照するようですが実際の引数はどうなっているでしょうか？
リファレンスによるとidの場合は先頭に#を、classの場合は先頭に.を付ける必要があるみたいです
https://developer.mozilla.org/ja/docs/Web/API/Document/
var el = document.querySelector(".myclass");
CSSセレクタを指定しておりますので、以下のようにしております。
document.querySelector('div.r-mk0yit:nth-child(2) > label:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > input:nth-child(1)').focus();
実際にvalueをいじってみますと値は送信されておりますので、記述には間違えがないのかな？と思っているのですが・・・
document.querySelector('div.r-mk0yit:nth-child(2) > label:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > input:nth-child(1)').value = 'aaa'; これですとvalueに aaa が入っております。
（再掲）まず「マウスでクリックを行った際の動作」を定義している部分を提示されないと何がしたいかわかりません。
CSSなりJavaScriptで動作を規定している箇所のコードを提示してください。
ご指摘頂きましてありがとうございます。
知識レベルが低く、動作を規定している個所のコードを見つける事が出来ません。
https://twitter.com/login の画面のログイン情報を入力する個所についての事になります。
それを質問文に入れるべきだと思います。また、ただ動きを再現したいのであれば、その旨書かれたほうがよいです。
失礼致しました。大変申し訳ございません。色々とご指摘頂きましてありがとうございます。
回答1件
0
ベストアンサー
普通に挙動しています
投稿2020/03/02 00:21
総合スコア116724
<script>
window.addEventListener('DOMContentLoaded', function(e){
document.querySelector('#n1').selected = true;
document.querySelector('#n2').click();
document.querySelector('#n3').focus();
});
</script>
<select>
<option value="">--</option>
<option value="1">1</option>
<option value="2" id="n1">2</option>
<option value="3">3</option>
<input type="text" id="n2" onclick="console.log('n2')">
<input type="text" id="n3">
アドバイス頂きましてありがとうございます。
試しに、このコメント欄に対して同じ事を行ってみようと思い、このように記述して動かしてみましたが、フォーカスがあたっているように見えません。
document.querySelector('#CommentComment').focus();
何か間違えていますでしょうか？
キーボード入力すればいきなりその要素に書き始められませんか？
クリックをした時にはカーソルが点滅するのですが、 document.querySelector('#CommentComment').focus(); ですとカーソルが点滅しておらず、キーボード入力を行っても反映されないようです。
クリックをした時にはカーソルが点滅していて、他の focus(); や selected = true; または click(); などはどれを試してもカーソルが点滅するような入力可能状態が確認出来ず困っております。
とりあえずidがCommentCommentというHTML要素が質問文中にでてこないので
これ以上はなんとも・・・
こちらTeratailのコメント欄で同じ事をやってみておりましたm(__)m
補足のやり取りの中にもid=CommentCommentは見当たらないですけど・・？
<script>
window.addEventListener('DOMContentLoaded', function(e){
document.querySelector('#CommentComment').focus();
});
</script>
<input id="CommentComment" autocapitalize="sentences" autocomplete="name" autocorrect="on" maxlength="50" name="name" spellcheck="true" type="text" dir="auto" data-focusable="true" class="r-30o5oe r-1niwhzg r-17gur6a r-1yadl64 r-deolkf r-homxoj r-poiln3 r-7cikom r-1ny4l3l r-1inuy60 r-utggzx r-vmopo1 r-1w50u8q r-1lrr6ok r-1dz5y72 r-1ttztb7 r-13qz1uu" value="">
上記なら普通にfocusされます
ありがとうございます。
色々と申し訳ございませんでした。
あなたの回答
tips
プレビュー
