首页 >web前端 >js教程 >js定位光标到输入框指定位置实例分享

js定位光标到输入框指定位置实例分享

小云云原创: 2018-03-10 16:40:163583浏览

在提供友好用户界面时，常常要定位光标到输入框的指定位置。通常是尾部，好让用户接着输入信息。我们可以用javascript操作dom来实现，以下是实现的方法

   function changeCursor(input, position) {   
2.             var range = input.createTextRange();   
3.             range.collapse(true);   
4.             range.moveStart(&#39;character&#39;, position);   
5.             range.select();   
6.       }  
7.       //在需要的地方调用此函数，比如 
8.       onfocus="positionCursor(this, this.length)"
functionchangeCursor(input, position) {  
      var range = input.createTextRange();  
      range.collapse(true);  
      range.moveStart(&#39;character&#39;,position);  
      range.select();  
}

//在需要的地方调用此函数，比如

onfocus="positionCursor(this,this.length)"

其中createTextRange 为元素创建一个TextRange对象

下面的表格列出了TextRange 对象的属性及方法，另外大家可以参阅w3c的文档
方法描述
compareEndPoints ：比较 TextRange 对象的结束点和其它范围的结束点。
duplicate ：返回TextRange 的副本。
execCommand ：在当前文档、当前选中区或给定范围上执行命令。
expand ：扩展范围以便完全包含指定单位的范围。
findText ：在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。
getBookmark：获取可用于使 moveToBookmark 返回相同范围的书签(白底字符串)。
getBoundingClientRect：获取指定 TextRectangle 对象集合绑定的对象。
getClientRects：获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。
inRange ：返回一个范围是否被另一个范围包含。
isEqual ：返回指定范围是否与当前范围相等。
move ：折叠给定文本范围并将空范围移动给定单位数。
moveEnd：更改范围的结束位置。
moveStart ：更改范围的开始位置。
moveToBookmark：移动到书签。
moveToElementText：移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本。
moveToPoint ：将文本范围的开始和结束位置移动到给定点。
parentElement ：获取给定文本范围的父元素。
pasteHTML ：将HTML 文本粘贴入给定文本范围，替换范围内任何先前的文本和 HTML 元素。
queryCommandEnabled：返回表明指定命令是否可于给定文档当前状态下使用 execCommand 命令成功执行的Boolean 值。
queryCommandIndeterm ：返回表明指定命令是否处于模糊状态的 Boolean 值。
queryCommandState ：返回表明命令当前状态的Boolean 值。
queryCommandSupported：返回表明当前命令是否在当前区域上支持的 Boolean 值。
queryCommandValue：返回文档、范围或当前选中区对于给定命令的当前值。
scrollIntoView：将对象滚动到可见范围内，将其排列到窗口顶部或底部。
select ：将当前选中区置为当前对象。
setEndPoint：根据其它范围的结束点设置某范围的结束点。

属性描述
boundingHeight：获取绑定 TextRange 对象的矩形的高度。
boundingLeft ：获取绑定 TextRange 对象的矩形左边缘和包含 TextRange 对象的左侧之间的距离。
boundingTop ：获取绑定 TextRange 对象的上边缘和包含 TextRange 对象的顶边之间的距离。
boundingWidth ：Retrieves the width ofthe rectangle that bounds the TextRange object.
htmlText ：获取绑定TextRange 对象的矩形的宽度。
offsetLeft ：获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetTop ：获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
text ：设置或获取范围内包含的文本。

js定位光标到输入框指定位置实例分享

相关文章