@Mizuki3posted at 2021-07-03

TradingViewでショートカットキーを押して銘柄検索ダイアログを表示させたい

Q&A

Closed

JavaScript Chrome Keyboard chrome-extension TradingView

解決したいこと

ブラウザ上で株などのチャート分析ができるTradingViewというサービスがあります。
https://jp.tradingview.com/chart/
シンボルを変更するためにはシンボル検索ダイアログを開く必要があり、
開くためには「シンボル検索」フォームをクリックするか、アルファベット(数字以外)を1文字入力する必要があります。

このシンボル検索フォームをショートカットキー（Tabキー）で開けるようにしたく、
以下のJavascriptコードでTabキーを入力したときに、":"キーの入力イベントを発生させて
フォームを表示させようとしたのですが動作しませんでした。
キーが入力されたことの検知はできているのですが、dispatchEventを実行しても何も起きません。

TradingViewでショートカットキーでシンボル検索フォームを表示する良い方法があれば教えて下さい。

該当するソースコード

window.addEventListener('keydown', event => {
  if (9 == event.keyCode) { // TAB
      var KEvent = new KeyboardEvent( "keydown", { keyCode: 186, altKey: false, shiftKey: false, key: ":" });
      document.dispatchEvent( KEvent );
    }
  }
);

自分で試したこと

「シンボル検索」フォームにクリックイベントを発生させてフォームを表示させようともしたのですが、クリックイベントは動作しませんでした。
このTradingViewというサイト自体、JavascriptによるDOM操作などをブロックする仕組みがあるのかもしれません。

0 likes

1Answer

@_y_s posted at 2021-07-04

こちらの環境ではクリックイベントを発生することができましたので紹介します。

window.addEventListener('keydown', e => {
  if (e.key === 'Tab') {
    // 画面左上の「シンボル検索」ボタン
    const btn = document.getElementById('header-toolbar-symbol-search');
    if (btn) {
      // ボタンクリック後のダイアログが開くイベント
      document.addEventListener('selectionchange', () => {
        // 検索ボックスに「:」を入力
        document.activeElement.value = ':';
      }, { once: true, passive: true });
      // ボタンをクリック
      btn.click();
    }
  }
}, { passive: true });

サイトがキーボードイベントをどのように実装・処理しているのか不明ですので、この方法が確実かと思います。
単純にフォーカスを当てるだけならば良かったのですが、ダイアログ自体も動的に生成しているようで断念しました。

あと余談ですが、keyCodeはWindowsとMacで違うらしいので注意が必要です。

2Like

Comments

@Mizuki3
Questioner
私の環境でも回答者様のコードがそのまま使えました。ありがとうございました！

Are you sure you want to delete the question?