どんな状態からでもキーボード操作のみでテキスト編集を開始したい
URLを利用して新規ページを作ったとき
一覧からページに飛んできたとき
ページ上で一度編集領域からフォーカスを外したとき
このようなときに、キーボード操作のみでテキスト部分にフォーカスを戻して、編集できるようにしたいです。
#要望一度マウスでクリックしないと編集できる状態に移れない気がするので。
(すでに何か方法があったりしますかね…?)
#質問
自分はChromeエクステンションのVimiumを使っているのでこんな感じで編集状態に入れるんですが、Scrapbox自体にそういう機能があると嬉しいなと。
以下のコードでは meta + i
でフォーカスできるようにしています
javascriptaddEventListener('keydown', e => {
if (!e.metaKey || e.key !== 'i') return
$('#text-input').focus()
})
なるほど、試してみます

すみません、最後の
)
が抜けてました 🙇

これいま効かなくなってません? 2023/11/13
今こっちを使ってます

これは問題ですね

UserScriptは超マニアックな我慢できない人向けの機能なので、それで解決したとは言いたくありません
わかる

tabキーでエディタの中にfocusできるとか、何か対策しようと思います
しかし、tabキーでエディタの中にfocusした場合
もう一度tabを押した時、次の要素にfocusが移動するのではなく、tab文字が入力されてしまう
DOM構造では次の要素はページ右側のpage menuだが、そこにfocusできなくなる
ページを開いた瞬間にページ内にfocusされているという仕様にした場合
同様の不具合が発生する
難しいですね。下手にキーボードだけで操作できるようにしない方が良い気がしています
現代は、ポインティングデバイスが付いていないマシンが存在しない
クリック対象も、ボタンと違ってエディタ部分は十分に巨大
今後の利用層を拡大するためにもデフォルトで対応してくれたらいいなと(一個人として)思います

ある程度機能として出来上がってる以上、そのために改修するのはものすごい労力なのは理解してますが…
たしかにtabで文字入力になって移動できないの難しいですね
他エディターのアクセシビリティ対応がきになる
とりあえず行方不明にならないようにフォーカスしたものが aria-label
など現在地がわかればいいのかな。
aria-label="エディタ領域"
とか aria-label="プロフィール画像"
なぜキーボードだけでテキスト編集を開始できると、利用層が拡大するのですか?

もちろんキーボード操作ができるのみで、色んな人に使ってもらえることになれるとは思ってませんが
キーボード操作ができる=アクセシブルになる=支援技術が必要な人にも利用できる=ユーザーの拡大の期待
という感じで1つの足掛けになればいいなと思っての発言でした

よいプロダクトだと思ってるのでこういう観点からもニーズが広がればいいなと
適切なショートカットキーを考えるのがよさそう


他のアプリではどうなってるんでしょうか
例えばXCodeなど
Vimは i
とか
暗黙のモードができると逆に混乱します

自分は
Ctrl+E
で普通に編集に入れるんですが、これへの対処?がこのショートカットキーってことですか?

また Esc
で編集から抜けられますし、抜けた後再び入ることも可能です
Windows7のChrome109です
自作した拡張機能で右クリックメニューに新規作成ボタンを追加し、別ウィンドウで作成できるようにしてみたのですが、それでも編集可能でした