将光标定位到文本的末尾(转)

最新推荐文章于 2024-05-10 10:38:12 发布

转载最新推荐文章于 2024-05-10 10:38:12 发布 · 6k 阅读

文章标签：

#html #javascript

本文介绍在不同浏览器环境下，如何将光标定位到文本末尾的方法，包括非Range方式和Range方式，并提供具体示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将光标定位到文本的末尾

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>

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>

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>

<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 例子

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><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>

.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>

function fuck() {

var range = document.body.createTextRange();

range.moveToElementText(document.getElementById("userSelect"));

range.collapse(false);

range.select();

}

</script>

</head>

<body>

</div>

</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。

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 光标的移动和位置

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>

4.1.7 设置光标

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 设置文本选择

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 代码

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>

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>

</style>

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>