光标定位到输入框文本的尾端_css input定位最后-优快云博客

本文链接：https://blog.youkuaiyun.com/csscnu/article/details/7951371

本文介绍如何使用JavaScript将光标移动到HTML输入框文本的末尾。通过`document.getElementById`获取元素，结合`createTextRange`创建文本范围，并利用`moveStart`和`select`方法实现光标定位。

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

<html>
<script language='javascript'>
      function movePoint()
   {
    var aa= document.getElementById("aa");
    aa.focus();
    var len = aa.value.length;
    var rng = aa.createTextRange();     //创建文本域
    rng.moveStart("character",len);
    rng.collapse(true);
    rng.select();
   }
     </script>
   <head>
     <title>a test for selection object</title>
   </head>
   <body οnlοad="movePoint()">

     <form>
        <input id="aa" name="aa" type="text" size=40 value='tttttt'>
     </form>
   </body>
</html>

相关知识点：TextRange对象是动态HTML(DHTML)的高级特性，使用它可以实现很多和文本有关的任务，例如搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象。

下面是TextRange的常用属性与方法：

属性
boundingHeight 获取绑定TextRange对象的矩形的高度
boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的距离
offsetLeft 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置
offsetTop 获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置
htmlText 获取绑定TextRange对象的矩形的宽度
text 设置或获取范围内包含的文本
方法
moveStart 更改范围的开始位置
moveEnd 更改范围的结束位置
collapse 将插入点移动到当前范围的开始或结尾
move 折叠给定文本范围并将空范围移动给定单元数
execCommand 在当前文档、当前选中区或给定范围上执行命令
select 将当前选择区置为当前对象
findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。

使用TextRange对象通常包括三个基本的步骤:

1.创建文本范围
2.设置开始点和结束点
3.对范围进行操作