在提供友好用户界面时,常常要定位光标到输入框的指定位置。通常是尾部,好让用户接着输入信息。我们可以用javascript操作dom来实现,以下是实现的方法
1. functionchangeCursor(input,position){
2. varrange=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 :设置或获取范围内包含的文本。
分享到:
相关推荐
在前端开发中,有时我们需要通过JavaScript来实现一些特殊交互效果,比如将光标自动定位到输入框的最右侧。这通常发生在用户不直接通过鼠标点击输入框,而是由程序逻辑控制光标位置的情况,比如编辑图片描述或使用...
本文将深入探讨如何利用HTML和jQuery实现"Enter"键控制input光标移动的功能,使得用户在按下"Enter"键时,光标能够根据预设逻辑在不同的输入框间自动移动。 首先,我们需要理解HTML中的`<input>`标签,它是用于创建...
`:移动文本范围的起始位置到文本输入框的末尾。`'character'`参数指定了移动单位,这里是字符。`e.value.length`获取输入框中的文本长度,所以这一步是将范围设置为从输入框末尾开始。 4. `r.collapse(true);`:这...
总结来说,该段代码通过jQuery的扩展功能,提供了一种在输入框中任意位置插入文本并进行选择的方法,解决了原生JavaScript在不同浏览器之间兼容性的问题,同时考虑了光标定位和文本选择的细节。这对于开发者在实际...
2. **设置光标位置**:开发者可以使用这个库设置光标到指定位置,这在需要将用户焦点引导到特定位置时非常有用,比如在错误输入后重新定位光标。 3. **获取偏移量**:`Caret.js` 还提供了计算光标相对于文本起始...
JS实现在文本指定位置插入内容是一个十分常见的前端操作,主要依赖于JavaScript语言中的一些操作DOM的方法和属性。从给出的示例中,我们可以学到如何根据不同浏览器(如IE、Firefox、Chrome等)来实现这一功能,并且...
1. 对于IE和其他旧版本的浏览器,使用`createTextRange`方法创建一个文本范围对象,使其折叠到起始位置,然后使用`moveEnd`和`moveStart`移动光标到指定位置,最后通过`select`方法选中这个范围。 2. 对于现代浏览器...
这个功能特别适用于输入框(input),用于在用户开始交互前定位光标,以方便用户继续输入。 当我们要实现一个功能,即在输入框获得焦点时,自动把光标移到内容的最后,jQuery的`focus()`函数就可以派上用场。这是...
如果支持`createTextRange`方法,则创建一个文本范围(TextRange),使用`moveEnd`和`moveStart`方法定位到指定的位置,然后调用`select`方法来选中文本。 此外,还介绍了如何使用`setCaretToPos`函数来设置光标...
同时,利用`getStart`函数来获取当前光标的位置,这通常涉及到对`range`对象的理解和使用,以便在不同的浏览器环境中正确地处理文本范围和光标位置。 总的来说,js公式编辑器通过自定义匹配规则和提示下拉框提供了...
13. 光标自动定位到文本框末尾:`onfocus="cc()"`事件绑定的函数`cc()`会确保光标始终位于文本框内容的最后。 14. 判断上一页来源:`document.referrer`返回的是用户从哪个页面跳转到当前页面的URL,这对于追踪用户...
12. 获取控件的绝对位置:JavaScript 和 VBScript 提供的方法可以计算元素相对于文档顶部和左边的偏移量,这对于定位和交互设计非常有用。 13. 光标定位:`cc` 函数用于确保光标始终位于文本框的末尾。它利用 `...
10. 文本框光标定位:`<script language="javascript">function cc(){...}</script><input type=text name=text1 value="123" onfocus="cc()">` 当文本框获得焦点时,自动将光标移动到文本末尾。 11. 获取上一页...
**解释**:此代码段用于自动将光标定位到文本框的末尾。这对于需要用户立即输入内容的场景非常有用。 ### 15. 获取前一页的URL **代码示例**: ```javascript document.referrer ``` **解释**:`document....
7. **控制文本输入框光标位置**:在文本输入框聚焦时,自动将光标定位到文本末尾,提供更好的用户体验。 - 示例代码:`()">` 配合 `cc()` 函数实现。 ### 四、高级功能探索 8. **获取引用页面地址**:通过 `...
通过调用`cc()`函数,可以在输入框获得焦点时自动将光标定位到最后一个字符之后,提高了用户体验。 ### 知识点15:获取前一页面的URL ```javascript document.referrer ``` 通过读取`document.referrer`属性,可以...
当用户聚焦到输入框时,光标会自动移动到输入框的最后位置。这对于输入密码或其他需要快速定位到末尾的情况非常有用。 ### 九、其他实用技巧 #### 15. 获取当前页面来源 ```javascript document.referrer ``` 此...
11. 光标定位:通过创建并选中文本范围(`TextRange` 对象)来实现光标始终位于文本框的末尾。当文本框获得焦点时,会自动执行这个功能。 12. `document.referrer`:返回用户从哪个URL访问当前页面,可以用来分析...