generated at
HTML側のインデントをinputに適用したJSから抜き差ししてみる
HTMLのinput要素とJavaScript使ってScrapboxみたいな挙動を雑に再現してみた
html
<script> let indent = 0; function redraw() { const dom = document.querySelector('span'); dom.innerHTML = ' '.repeat(indent); } function handle() { const dom = document.querySelector('input'); if(dom.selectionStart === 0) { if(this.event.keyCode == 8) { indent = Math.max(0, indent - 1); redraw(); return false; } if(this.event.keyCode == 32) { indent += 1; redraw(); return false; } } return true; } </script> <span></span>・<input autofocus onkeydown="return handle()"></input>

雑にonkeydownでinputの流れを拾ってカーソル(selectionStart)が0位置、つまり先頭の時に先っちょに置いたspanの中身を書き換えている
Scrapboxは中に更にspan置いてたけど、どちらがいいんだろう