快捷導(dǎo)航

js移動(dòng)焦點(diǎn)到最后位置的簡單方法

更新時(shí)間：2016年11月25日 10:40:24 投稿：jingxian

下面小編就為大家?guī)硪黄猨s移動(dòng)焦點(diǎn)到最后位置的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

當(dāng)輸入框(input/textarea)獲得焦點(diǎn)時(shí)，將焦點(diǎn)移動(dòng)到最后，在某些情況下用戶體驗(yàn)很好。網(wǎng)上的大部分方法都是針對(duì)IE瀏覽器的。

代碼如下：

var el = document.getElementById('txtArticle');
var range = el.createTextRange();
range.moveStart('character', el.value.length);
range.collapse(false);
range.select();

其實(shí)可以將moveStart這行刪除，因?yàn)閏reateTextRange方法創(chuàng)建range后，利用collapse方法，參數(shù)為false就可以移動(dòng)到最后了。collapse(true)移動(dòng)光標(biāo)到range的開始，collapse(false)移動(dòng)光標(biāo)到range的結(jié)尾。 Firefox等標(biāo)準(zhǔn)瀏覽器可以使用w3c的setSelectionRange方法。

代碼如下：

var range, el = document.getElementById('txtPhone');
if (el.setSelectionRange) {
  el.focus();
  el.setSelectionRange(el.value.length, el.value.length)
} else {
  range = el.createTextRange();
  range.collapse(false);
  range.select();
}

注意setSelectionRange方法僅適用于input/textarea元素。其它非原生的可編輯元素的焦點(diǎn)移到可以利用selection對(duì)象的collapse方法，

例如：

var sel, el = document.getElementById('hint');
sel = window.getSelection();
sel.collapse(el, 1);
el.focus();

以上這篇js移動(dòng)焦點(diǎn)到最后位置的簡單方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

TypeScript與JavaScript項(xiàng)目里引入MD5校驗(yàn)和
這篇文章主要介紹了TypeScript與JavaScript項(xiàng)目里引入MD5校驗(yàn)和，MD5校驗(yàn)和可以用于驗(yàn)證網(wǎng)絡(luò)文件傳輸?shù)耐暾砸约胺乐刮募蝗舜鄹?。下文我們就一起來學(xué)習(xí)TypeScript與JavaScript項(xiàng)目里引入MD5校驗(yàn)和_MD5校驗(yàn),需要的朋友可以參考一下
2022-02-02
JavaScript的兼容性與調(diào)試技巧
可能在大家使用JavaScript效果時(shí)，會(huì)碰到在各個(gè)瀏覽器中頁面的顯示效果不同，甚至報(bào)錯(cuò)，這就是代碼的兼容性問題。本文就是主要介紹JavaScript的兼容性與調(diào)試技巧，希望對(duì)大家有所幫助
2016-11-11
JavaScript內(nèi)存泄漏的處理方式
這篇文章主要介紹了JavaScript內(nèi)存泄漏的處理方式，通過理論和實(shí)例結(jié)合的方式讓你理解的更加透徹。
2017-11-11
JS獲取IMG圖片高寬的簡單實(shí)例
下面小編就為大家?guī)硪黄狫S獲取IMG圖片高寬的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
Bootstrap柵格系統(tǒng)簡單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Boostrap柵格系統(tǒng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
8個(gè)絕妙的JS字符串處理技巧分享
當(dāng)處理JavaScript字符串時(shí),有許多有趣的技巧可以提高你的編碼效率,這篇文章將介紹一些有關(guān)JavaScript字符串的技巧,讓你在字符串操作方面更加?jì)故?/div> 2023-10-10
javascript打印html內(nèi)容功能的方法示例
這篇文章主要介紹了javascript打印html內(nèi)容的小示例，大家參考使用
2013-11-11
JS獲取url參數(shù)、主域名的方法實(shí)例分析
這篇文章主要介紹了JS獲取url參數(shù)、主域名的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)主機(jī)域名、端口、路徑名、URL參數(shù)等的相關(guān)操作技巧,需要的朋友可以參考下
2016-08-08
JavaScript中讀取和保存文件實(shí)例
這篇文章主要介紹了JavaScript中讀取和保存文件實(shí)例,使用HTML5 File API實(shí)現(xiàn),需要的朋友可以參考下
2014-05-05
uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過程
經(jīng)常在做app的時(shí)候,會(huì)有做熱更新的需求,這也是常用的更新app的一種手段,下面這篇文章主要給大家介紹了關(guān)于uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11