js實現(xiàn)文本框中焦點在最后位置
更新時間：2014年03月04日 09:27:40 作者：
本篇文章主要是對js實現(xiàn)文本框中焦點在最后位置的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所 幫助
在一般的程序中.程序員做輸入框內(nèi)容正確性檢測時一般喜歡通過判斷內(nèi)容的合法性來確定焦點框.
如:
復(fù)制代碼 代碼如下:
if(obj.value==""){
obj.focus();
return false;
}
這樣當哪一項輸入框為空是就將焦點移動那一項輸入框..這項功能使用起來非常方便..但是存在一個小小的問題...
那就是obj.focus()將焦點移動到輸入框后,會將文字光標(就是一閃一閃的豎線)移動到這個輸入框的第一個字符的位置...就上面的判斷而言..如果文本框中沒有內(nèi)容..obj.focus正好可以滿足我們直接在文本框中輸入內(nèi)容而不用點擊一下文本框以使文本有焦點...
但是,如果文本框中已經(jīng)有內(nèi)容了..但是這個內(nèi)容不合法.obj.focus()同樣的將光標移動到了這個文本框的第一個字符的位置..這時就會讓注意用戶體驗的設(shè)計師郁悶了...我們需要的是文本框得到焦點,然后文字光標移動到文本框的最后,讓用戶可以不用點擊文本框直接輸入內(nèi)容..輸入的內(nèi)容會在原來的內(nèi)容的后面追加起來..
下面的代碼可以完成這個小細節(jié):
復(fù)制代碼 代碼如下:
<script language="javascript">
function getSelectPos(obj){
var esrc = document.getElementById(obj);
if(esrc==null){
esrc=event.srcElement;
}
var rtextRange =esrc.createTextRange();
rtextRange.moveStart('character',esrc.value.length);
rtextRange.collapse(true);
rtextRange.select();
}
</script>
這個代碼是在用戶體驗的細節(jié)性上會對設(shè)計師有很大的幫助...
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)文本框選中的方法,涉及javascript中select()方法的使用技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JavaScript ES5標準中新增的Array方法 的相關(guān)資料,需要的朋友可以參考下2016-06-06
再讀《JavaScript權(quán)威指南》（犀牛書）9.7確定對象類型 之摘錄2012-03-03
這篇文章主要介紹了js實現(xiàn)仿Discuz文本框彈出層效果的方法,可實現(xiàn)點擊文本框彈出窗口選擇數(shù)據(jù)的效果,涉及鼠標事件及頁面自定義彈出窗口的相關(guān)操作技巧,需要的朋友可以參考下2015-08-08
以前需要做一個數(shù)字輸入的InputBox,結(jié)果無奈需求太BT，搞得焦頭爛額，重做了無數(shù)次。無奈之下，再次Google，發(fā)現(xiàn)早有成熟的插件了(悶在家里造輪子果然不好啊)，autoNumeric使用方便，功能強大，現(xiàn)在介紹給大家，一個非常好的jquery plugin。2009-11-11
JavaScript是單線程的腳本語言,所以代碼在執(zhí)行的時候,只有一個主線程來執(zhí)行所有的任務(wù),同一個時間只能做同一件事情。本文就為大家詳細講解一下它的件循環(huán)機制，需要的可以參考一下2022-04-04
JavaScript實現(xiàn)的原生態(tài)兼容IE6可調(diào)可控滾動文字功能詳解
這篇文章主要介紹了JavaScript實現(xiàn)的原生態(tài)兼容IE6可調(diào)可控滾動文字功能,簡單說明了文字滾動的實現(xiàn)原理并結(jié)合具體實例形式給出了javascript文字滾動功能的具體實現(xiàn)代碼,需要的朋友可以參考下2017-09-09
淺談通過JS攔截 pushState和replaceState事件
下面小編就為大家?guī)硪黄獪\談通過JS攔截 pushState和replaceState事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
用js實現(xiàn)對象的移動，不錯的應(yīng)用2008-09-09
動態(tài)加載圖片路徑 保持JavaScript控件的相對獨立性
根據(jù)新界面的要求，需要一部分圖片來增強日期控件的美觀性?？紤]到既要實現(xiàn)加載圖表的目標，又要保持控件的獨立性以便將來的移植。2010-09-09