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