《focus定位到末尾的方法.docx》由会员分享，可在线阅读，更多相关《focus定位到末尾的方法.docx（12页珍藏版）》请在三一办公上搜索。
1、focus定位到末尾的方法将光标定位到文本的末尾 1 概述 分成两种情况吧。 一、对象是input、textarea等，一个纯文本框，里面是文字。这种要在focus的时候，将光标也定位到末尾，比较简单。 二、对象是div，里面可以嵌套其他元素，如input等。这种较复杂。 不管是哪种，都可以通过Range对象来进行操作，IE、Firefox下这两个对象有较大差异。对于第一种情况，较简单的，不通过Range对象也可以其他方式简单进行处理。 下面分别讲述如何处理。 2 简单 纯文本 上面已经提到，有两种方式，一是通过Range对象，一种是通过其他方式。 2.1 非Range方式 2.1.1 原理
2、大概实现的原理： 1、 先focus； 2、 将input、textarea的值清空，再赋一次值。 2.1.2 例子 光标靠右 body font: 15px arial, sans-serif, 宋体; a .caption .input-elem .input-elem:hover #signIn color: #FFF; background-color: #36C; border: 1px solid #333; line-height: 28px; height: 28px; vertical-align: middle; border-color: #F1CA7E; border:
3、 1px solid #999; line-height: 30px; height: 30px; width: 200px; font-weight: bold; vertical-align: middle; line-height: 30px; height: 30px; color: #006699; text-decoration: none; font-family: arial, sans-serif, 宋体; #main width: 400px; height: 400px; margin: 40px auto; #btn-sign var $ = function( id
4、) return document.getElementById( id ); function ready function fuck $(email).focus; /注释掉下面则不能光标靠右显示 / 法1. ie下有效,Firefox下失效 /$(email).value = $(email).value; / 法2. ie, firefox下均有效 var t = $(email).value; $(email).value = ; $(email).value = t; function contact alert(fuck); Email address: Password: or
5、 contact us 2.2 Range方式 2.2.1 例子 function shit textarea_focus_end(remark); /* $(remark).focus; var _t = $(remark).value; $(remark).value = ; $(remark).value = _t; */ /* * textarea将光标移至末尾 * */ function textarea_focus_end(objTextarea) var objTextarea = ( typeof objTextarea = string | objTextarea insta
6、nceof String ) ? document.getElementById(objTextarea) : objTextarea; var pos = objTextarea.value.length; if(objTextarea.setSelectionRange) /firefox objTextarea.focus; objTextarea.setSelectionRange(pos, pos); else if(objTextarea.createTextRange) /IE var range = objTextarea.createTextRange; range.coll
7、apse(true); range.moveEnd(character, pos); range.moveStart(character, pos); range.select; 春花秋月何时了，往事知多少。 小楼昨夜又东风， 故国不堪回首月明中。 3 复杂 DIV嵌套(IE) 这种只能通过操纵Range方式进行处理。 本例子只支持IE。 3.1 例子 光标靠右 .btn color: #FFF; background-color: #36C; border: 1px solid #333; line-height: 28px; height: 28px; vertical-align: mi
8、ddle; font-family: arial,sans-serif,宋体; #test width: 300px; height: 100px; float: left; left: 10px; top: 10px; #userSelect border: 1px solid #999; height: 70px; #userSelect input border: none; display: inline; width: 25px; function fuck var range = document.body.createTextRange; range.moveToElementT
9、ext(document.getElementById(userSelect); range.collapse(false); range.select; ; 4 参考资料 4.1 IE下的createTextRange 参考： 4.1.1 方法解析 collapse(bStart) 移动Range的插入点 bStart true(移到开头) false(移到末尾) findText(sText , iSearchScope , iFlags) 在Range中查找sText iSearchScope 开始位置，负数方向搜索 iFlags 2(整词匹配) 4(区别大小写) moveStart(s
10、Unit , iCount) moveEnd(sUnit , iCount) 移动Range的开头或结尾 sUnit character(字) word(词) sentence(句) textedit(Range) iCount 移动数量，默认为1 moveToPoint(iX, iY) 移动光标到坐标(iX,iY) pasteHTML(sHTMLText) 替换Range中的html scrollIntoView(bAlignToTop) 滚动使之在当前窗口显示 bAlignToTop true(Range在窗口开头) false(Range在窗口底部) select 选中Range 4.1
11、.2 光标不变 直接obj.focus，光标会返回之前的位置，即位置不变 4.1.3 光标在最前 var r = obj.createTextRange; r.collapse; r.select; 用这个方法可以使光标在input框最前面 4.1.4 光标在最后 var r = obj.createTextRange; r.collapse(false); r.select; 用这个方法可以使光标停在input框的最后 4.1.5 选取input框中部分内容 需要用到Range的moveStart或moveEnd方法，其详细的方法使用可以参考MSDN。 function sl(o, m, n
12、) var rt = o.createTextRange; rt.collapse; rt.select;/光标置最前 var r = document.selection.createRange; r.collapse(false); r.moveStart(character, m);/从m位开始 r.moveEnd(character, n);/选取n位 r.select; 4.1.6 光标的移动和位置 function setpos(obj,n) function getpos(obj) obj.focus;/光标位置不变 var r = document.selection.crea
13、teRange; r.collapse(false); r.setEndPoint(StartToStart, obj.createTextRange); alert(r.text.length); obj.focus; var r = document.selection.createRange; r.collapse(false); r.move(character, n); r.select; 4.1.7 设置光标 function setCursor var num=parseInt(document.all.s.value) range=document.all.demo.creat
14、eTextRange; if(document.all.collapse.checked) range.select; range.collapse(false); range.moveEnd(character,-1*num); range.collapse(true); range.moveStart(character,-1+num); else 关于光标定位的补充.abcdefghijklmnopqrstuvwxyz 倒数 第位 4.1.8 设置文本选择 function setSelect 关于光标定位的补充.abcdefghijklmnopqrstuvwxyz 从正数 到 倒数第位
15、 var range = document.body.createTextRange; range.moveToElementText(demo) range.moveEnd(character,-1*parseInt(document.all.s.value); range.moveStart(character,-1+parseInt(document.all.b.value); range.select; 4.2 Range定位的一个例子(Firefox) 4.2.1 代码 function setCaret var el = document.getElementById(editab
16、le); var range = document.createRange; var sel = window.getSelection; range.setStart(el.childNodes2, 5); range.collapse(true); sel.removeAllRanges; sel.addRange(range); el.focus; text text texttext text texttext text text focus 4.2.2 效果 4.3 Range选中DIV文本的一个例子(IE & FF) 4.3.1 代码 光标靠右 function selectTex
17、t(divid) if (document.selection) var div = document.body.createTextRange; div.moveToElementText(document.getElementById(divid); div.select; else var div = document.createRange; /div.setStartBefore(document.getElementById(divid); /div.setEndAfter(document.getElementById(divid) ; div.selectNode(document.getElementById(divid); /这一句与上面两句的效果一样 window.getSelection.addRange(div); Select Text Select Me
