HTML側のインデントをinputに適用したJSから抜き差ししてみる

code: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置いてたけど、どちらがいいんだろう