将光标定位到文本的末尾
1 概述
分成两种情况吧。
一、对象是input、textarea等，一个纯文本框，里面是文字。这种要在focus的时候，将光标也定位到末尾，比较简单。
二、对象是div，里面可以嵌套其他元素，如input等。这种较复杂。
不管是哪种，都可以通过Range对象来进行操作，IE、Firefox下这两个对象有较大差异。对于第一种情况，较简单的，不通过Range对象也可以其他方式简单进行处理。
下面分别讲述如何处理。
2 简单纯文本
上面已经提到，有两种方式，一是通过Range对象，一种是通过其他方式。
2.1 非Range方式
2.1.1 原理
大概实现的原理：
1、 先focus()；
2、 将input、textarea的值清空，再赋一次值。（类似模拟一次输入的过程）
2.1.2 例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>光标靠右</title>
<style type="text/css">
body {
font: 15px arial, sans-serif, 宋体;
}
a {
color: #006699;
text-decoration: none;
}
.caption {
font-weight: bold;
vertical-align: middle;
line-height: 30px;
height: 30px;
}
.input-elem {
border: 1px solid #999;
line-height: 30px;
height: 30px;
width: 200px;
}
.input-elem:hover {
border-color: #F1CA7E;
}
#signIn {
color: #FFF;
background-color: #36C;
border: 1px solid #333;
line-height: 28px;
height: 28px;
vertical-align: middle;
font-family: arial, sans-serif, 宋体;
}
#main {
width: 400px;
height: 400px;
margin: 40px auto;
}
#btn-sign {
text-align: center;
}
</style>
<script language="javascript">
var $ = function( id ) {
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");
}
</script>
</head>
<body onLoad="ready()">
<div id="main">
<div>
<p class="caption">Email address: <input name="email" type="text"
class="input-elem" id="email" value="helloKitty@szcomtop.com" /></p>
<p class="caption">Password: <input name="pwd" type="password"
class="input-elem" id="pwd" value="" /></p>
</div>
<div id="btn-sign"><input type="button" id="signIn" name="signIn"
value="Sign In" onClick="fuck();"/> or <a href="#"
onClick="contact()">contact us</a></div>
</div>
</body>
</html>
2.2 Range方式
2.2.1 例子
<script language="javascript">
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 instanceof String )
? document.getElementById(objTextarea)
: objTextarea;
var pos = objTextarea.value.length;
if(objTextarea.setSelectionRange) { //firefox
objTextarea.focus();
objTextarea.setSelectionRange(pos, pos);
} elseif(objTextarea.createTextRange) { //IE
var range = objTextarea.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>
<textarea id="remark" rows="4" cols="30">
春花秋月何时了，往事知多少。小楼昨夜又东风，故国不堪回首月明中。
</textarea><br>
<inputtype="button"id="shit"name="shit"value="shit"class="btn"onclick="shit()"/>
3 复杂 DIV嵌套(IE)
这种只能通过操纵Range方式进行处理。
本例子只支持IE。
3.1 例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>光标靠右</title>
<style type="text/css">
.btn {
color: #FFF;
background-color: #36C;
border: 1px solid #333;
line-height: 28px;
height: 28px;
vertical-align: middle;
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;
}
</style>
<script language="javascript">
function fuck() {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById("userSelect"));
range.collapse(false);
range.select();
}
</script>
</head>
<body>
<div id="test">
<div id="userSelect" contentEditable="true">
<input type="text" value="Tom" UNSELECTABLE="on"/>;<input id="cat" type="text" value="Cat" UNSELECTABLE="on"/>
</div>
<input type="button" id="fuck" name="fuck" value="fuck" class="btn" onclick="fuck()"/>
</div>
</body>
</html>
4 参考资料
4.1 IE下的createTextRange
参考：http://hi.baidu.com/xh28025/blog/item/515c1efa0e83156e034f56aa.html
4.1.1 方法解析
collapse([bStart])
移动Range的插入点
bStart true(移到开头) false(移到末尾)
findText(sText [, iSearchScope] [, iFlags])
在Range中查找sText
iSearchScope 开始位置，负数方向搜索
iFlags 2(整词匹配) 4(区别大小写)
moveStart(sUnit [, 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.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。
<script language="javascript">
function sl(o, m, n){
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();
}
</script>
<inputname="a"value="123456789"><inputtype="button"value="select"onclick="sl(a,2,4)">
4.1.6 光标的移动和位置
<script language="javascript">
function setpos(obj,n){
obj.focus();
var r = document.selection.createRange();
r.collapse(false);
r.move("character", n);
r.select();
}
function getpos(obj){
obj.focus();//光标位置不变
var r = document.selection.createRange();
r.collapse(false);
r.setEndPoint("StartToStart", obj.createTextRange());
alert(r.text.length);
}
</script>
<input type="button" value="向前" onclick="setpos(a,-1)"/>
<input type="button" value="向后" onclick="setpos(a,1)"/>
<input type="button" value="当前光标的位置" onclick="getpos(a)"/>
4.1.7 设置光标
<script language="javascript">
function setCursor(){
var num=parseInt(document.all.s.value)
range=document.all.demo.createTextRange();
if(document.all.collapse.checked){
range.collapse(false);
range.moveEnd('character',-1*num);
}else{
range.collapse(true);
range.moveStart('character',-1+num);
}
range.select();
}
</script>
<textarea id=demo cols=50 rows=5>关于光标定位的补充.abcdefghijklmnopqrstuvwxyz</textarea><br>
<inputtype=checkboxid=collapse>倒数第<inputid=svalue=4size=4>位
<inputvalue="设置光标"type=buttononclick=setCursor()>
4.1.8 设置文本选择
<script language="javascript">
function setSelect(){
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();
}
</script>
<div id=demo>关于光标定位的补充.abcdefghijklmnopqrstuvwxyz</div><br>
从正数<inputid=bvalue=4size=4>到倒数第<inputid=svalue=4size=4>位
<inputvalue="设置文本选择"type=buttononclick=setSelect()>
4.2 Range定位的一个例子(Firefox)
4.2.1 代码
<script language="javascript">
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
</script>
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
</div>
<button id="button" onclick="setCaret()">focus</button>
4.2.2 效果
4.3 Range选中DIV文本的一个例子(IE & FF)
4.3.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>光标靠右</title>
<style type="text/css">
</style>
<script language="javascript">
function selectText(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);
}
}
</script>
</head>
<body>
<button onclick="selectText('divid')">Select Text</button>
<div id="divid">Select Me</div>
</body>
</html>
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
