视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js定位光标到输入框指定位置实例分享
2020-11-27 20:01:25 责编:小采
文档


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

 function changeCursor(input, position) { 
2. var range = input.createTextRange(); 
3. range.collapse(true); 
4. range.moveStart('character', position); 
5. range.select(); 
6. } 
7. //在需要的地方调用此函数,比如 
8. onfocus="positionCursor(this, this.length)"
functionchangeCursor(input, position) { 
 var range = input.createTextRange(); 
 range.collapse(true); 
 range.moveStart('character',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 :设置或获取范围内包含的文本。

相关推荐:

input输入框中的光标大小显示不一致应该怎么解决

利用css隐藏input的光标方法

JavaScript自定义文本框光标的代码详情

下载本文
显示全文
专题