入力ボックスの右端にカーソルを置いてコードを実装_基礎知識

このようなシーンは、フロントエンド開発プロセスでよく必要になります。 JS を使用して、入力ボックスの右端にカーソルを置きます。

シーン 1: 画像の説明テキストを編集します

シナリオ 2: Script.aculo.us の Ajax.InPlaceEditor クラス。ダブルクリックして編集し、編集後に離れるとエリアが自動的に更新されます。

上記のすべてのシナリオでは、JS が入力ボックスの右端にカーソルを配置する必要がありますが、マウスで入力ボックスをクリックする必要はありません。

最も基本的な実装方法は HTMLElement の focus メソッドであることがわかっています。以下の通り

コードをコピーします コードは次のとおりです。

input type= "text" value="hello"/>

var input = document.getElementsByTagName('input')
input.focus ();

このページを開くと、カーソルが入力ボックスの左端にあることがわかります。効果は以下の通りです

ここで達成する必要があるのは、カーソルを入力ボックスの右端に配置することです。これには 3 つの手順が必要です。

1、フォーカスメソッド を呼び出します。

2、値の割り当ては空です

3、前の入力の値を自分に割り当てます

コードをコピーします コードは次のとおりです。

input type= "text" value="hello"/>

var input = document.getElementsByTagName('input')
var val = input.value;
input.value = '';


実行 最終的な効果は図に示すとおりで、カーソルは深度ボックスの右端にあります