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

转载 于 2014-10-23 14:21:43 发布 · 6k 阅读 · 2
文章标签：

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

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

 

 

rongge2008
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值