將光標定位于輸入框最右側實現(xiàn)代碼
更新時間：2012年12月04日 10:05:42 作者：
如何將光標定位于輸入框最右側的實現(xiàn)方式，這種做法很多人都需要，本文將詳細介紹，需要的朋友可以參考下
前端開發(fā)過程中，經(jīng)常需要這樣的場景。用JS實現(xiàn)將光標定位于輸入框最右側。
場景一：編輯圖片的描述文字
場景二：Script.aculo.us的Ajax.InPlaceEditor類。雙擊可編輯，編輯后離開可自動更新該區(qū)域。
以上場景都需要JS實現(xiàn)將光標定位于輸入框最右側，卻不是通過鼠標點入輸入框內(nèi)。
我們知道實現(xiàn)最基本的方法是HTMLElement的focus方法。如下
復制代碼 代碼如下:
<p>
<input type="text" value="hello"/>
</p>
<script>
var input = document.getElementsByTagName('input')[0];
input.focus();
</script>
打開該頁面會發(fā)現(xiàn)，光標位于輸入框的最左側。效果如下
而現(xiàn)在要實現(xiàn)的是將光標定位于輸入框最右側，需要三個步驟。
1，調(diào)用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>
運行后效果如圖，光標在深入框最右側
相關文章
在javascript中創(chuàng)建對象的各種模式解析
下面小編就為大家?guī)硪黄趈avascript中創(chuàng)建對象的各種模式解析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
下面小編就為大家?guī)硪黄褂肧cript元素發(fā)送JSONP請求的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了Js逆向教程作用域和自執(zhí)行函數(shù)介紹，本文章內(nèi)容詳細，具有很好的參考價值，希望對大家有所幫助，需要的朋友可以參考下2023-01-01
javascript 多瀏覽器 事件大全 ，對于一些事件的使用限制于觸發(fā)方法可以參考下。2010-03-03
這篇文章主要介紹了JavaScript中的getDay()方法使用詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
有限狀態(tài)機（Finite-state machine）是一個非常有用的模型，可以模擬世界上大部分事物,下面是使用示例2014-05-05
本文簡單介紹了javascript的5種框架分類，以及框架特征的相關資料，有需要的童鞋們可以參考下2014-11-11
Three.js是一個偉大的開源WebGL庫,WebGL允許JavaScript操作GPU，在瀏覽器端實現(xiàn)真正意義的3D,本文介紹下THREE.JS基礎/瀏覽器支持/設置場景/構建網(wǎng)格表面/材質/光/渲染循環(huán)/通用的對象屬性等等，感興趣的朋友可以了解下哦2013-01-01
Javascript代碼在頁面加載時的執(zhí)行順序介紹
Javascript代碼在頁面加載時的執(zhí)行順序介紹，需要的朋友可以參考一下2013-05-05
javascript中var與let、const的區(qū)別詳解
這篇文章主要介紹了javascript中var與let、const的區(qū)別詳解,需要的朋友可以參考下2022-12-12