HTML側のインデントをinputに適用したJSから抜き差ししてみる
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置いてたけど、どちらがいいんだろう