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