將游標定位於輸入框最右側實現代碼

前端開發過程中，經常需要這樣的情境。用JS實現將游標定位於輸入框最右側。

情境一：編輯圖片的標題文字

情境二：Script.aculo.us的Ajax.InPlaceEditor類。雙擊可編輯，編輯後離開可自動更新該地區。

以上情境都需要JS實現將游標定位於輸入框最右側，卻不是通過滑鼠點入輸入框內。

我們知道實現最基本的方法是HTMLElement的focus方法。如下

複製代碼 代碼如下:
<p>
<input type="text" value="hello"/>
</p>
<script>
var input = document.getElementsByTagName('input')[0];
input.focus();
</script>
　

開啟該頁面會發現，游標位於輸入框的最左側。效果如下

而現在要實現的是將游標定位於輸入框最右側，需要三個步驟。

1，調用focus方法

2，value賦值為空白

3，之前的input的值再賦給自己

複製代碼 代碼如下:
<p>
<input type="text" value="hello"/>
</p>
<script>
var input = document.getElementsByTagName('input')[0];
var val = input.value;
input.focus();
input.value = '';
input.value = val;
</script>

運行後效果，游標在深入框最右側