序文

シーンに遭遇したときは、いくつかのテキストラベルが必要です。クリックしてテキストボックスに自動的に追加します。次に、入力ボックス内のカーソルの位置を取得および設定する方法を習得し、記録を作成し、使用方法を記録する必要があります。。

カーソル位置を取得

カーソルの開始位置を取得するために、入力のdomに属性selectionStartがあり、属性selectionEndは終了位置です。

カーソルが特定の位置でのみ選択されている場合、2つの値は同じであり、値は数値です。カーソルは、入力の最初の文字の左側から0として、最初の文字と2番目の文字は1で、以下同様です。

カーソルがテキストの特定のセクションを選択すると、これらの2つの値は、選択されたテキストの前面と背面の位置をそれぞれ取得し、位置番号は上記の形式で取得されます。

注意すべき2つのポイント：

SelectionStartとselectionEndは、入力が最初に焦点が合わなくなるまで、デフォルトで0になります。
カーソルが位置またはテキストの一部を選択した後、フォーカスを失った場合でも、selectionStartとselectionEndは、フォーカスを失う前の選択の結果です。

<body>
<input id="box" value="111"/>
<button onclick="test()">
    获取光标位置
</button>
<script>
    function test() {
        const input = document.getElementById('box')
        console.log(input.selectionStart,input.selectionEnd)
    }
</script>
</body>
复制代码

カーソル位置を設定する

入力のsetSelectionRange関数は、カーソル位置を設定するために使用されます。

フォーカスを設定する前に、入力にフォーカスを合わせるのを忘れないでください。フォーカスされていない場合、カーソルはありません。

開始位置と終了位置の2つのパラメータを渡す必要があります。同じ数値に設定されている場合は、固定位置を選択できます。2つの数値に設定されている場合は、2つの位置の間のテキストを選択するのと同じです。マウス。

方向を設定できる3番目の入力パラメーターもあります（「前方」|「後方」|「なし」）。たとえば、後方は位置を後ろから前にカウントし始めることができます。

<body>
<input id="box"/>
<button onclick="test()">
    获取光标位置
</button>
<button onclick="test2()">
    设置光标位置为第一个字符与第二个字符之间
</button>
<script>
    function test() {
        const input = document.getElementById('box')
        console.log(input.selectionStart)
    }

    function test2(index) {
        const input = document.getElementById('box')
        input.focus()
        input.setSelectionRange(1, 2)
    }
</script>
</body>
复制代码

ここに画像の説明を挿入

終わりの言葉

記事が役に立ったと思ったら、気に入って集めてください。間違いや提案があれば、メッセージを残してください、ありがとうございます〜

js入力ボックス内のカーソルの位置を取得および設定する方法

序文

カーソル位置を取得

カーソル位置を設定する

終わりの言葉

おすすめ