首頁 > web前端 > js教程 > 將遊標定位於輸入框最右側實現代碼_基礎知識

將遊標定位於輸入框最右側實現代碼_基礎知識

WBOY
發布: 2016-05-16 17:47:23
原創
1209 人瀏覽過

前端開發過程中,常常需要這樣的場景。以JS實現將遊標定位於輸入框最右側。

場景一:編輯圖片的描述文字


場景二:Script.aculo.us的Ajax.InPlaceEditor類別。雙擊可編輯,編輯後離開可自動更新該區域。

以上場景都需要JS實現將遊標定位於輸入框最右側,卻不是透過滑鼠點入輸入框內。

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

複製程式碼 程式碼如下:








<script> </script>
var input = document.getElementsByTagName('input')[0];
input.focus();

 

開啟該頁面會發現,遊標位於輸入框的最左邊。效果如下

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

1,呼叫focus方法

2,value賦值為空

3,之前的input的值再賦給自己複製程式碼


程式碼如下:








<script> <BR>var input = document.getElementsByTagName('input')[0]; </script>
var val = input.value;

input.focus(); input.value = '';

input.value = val; 運行後效果如圖,遊標在深入框最右側
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板