`

网页中光标在input中的定位

阅读更多
转自:http://zhujinguo.iteye.com/blog/765929

IE下的Range操作比Mozilla下强很多,这里只讨论IE下的操作。
这里选介绍几个光标定位的特点:
1.光标不变
直接obj.focus(),光标会返回之前的位置,即位置不变
2.光标在最前
var r = obj.createTextRange();
r.collapse();
r.select();
用这个方法可以使光标在input框最前面
3.光标在最后 var r = obj.createTextRange();
r.collapse(false);
r.select();
用这个方法可以使光标停在input框的最后
4.选取input框中部分内容需要用到Range的moveStart或moveEnd方法, 其详细的方法使用可以参考MSDN.
<script type="text/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>
<input name="a" value="123456789"><input type=button value="select" onclick="sl(a,2,4)">

5.再引申一下光标的移动和位置,这个是有人经常问到的问题 <input name=a value="123456789">
<input type=button value="向前" onclick="setpos(a,-1)">
<input type=button value="向后" onclick="setpos(a,1)">
<input type=button value="当前光标的位置" onclick="getpos(a)">
<script type="text/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>
分享到:
评论

相关推荐

    JavaScript获取,设置光标位置,兼容InputTextArea

    在JavaScript编程中,获取和设置光标位置是常见的需求,特别是在与用户交互的表单元素如`&lt;input&gt;`和`&lt;textarea&gt;`中。这涉及到DOM(文档对象模型)操作和事件处理,对于创建动态和响应式的网页应用至关重要。本文将...

    使用focus方法让光标默认停留在INPUT框

    在网页开发中,有时我们需要实现一个功能,即用户打开页面后,输入框自动获取焦点,使得用户可以直接在该输入框中开始输入,无需额外点击。这可以提高用户体验,特别是对于移动设备上的应用,减少用户的操作步骤。这...

    输入密码时显示密码及光标定位到末尾

    在IT领域,尤其是在Web开发中,用户界面的设计与交互体验是至关重要的。"输入密码时显示密码及光标定位到末尾"是一个常见的功能需求,它涉及到前端开发中的JavaScript技术,以及用户体验设计的考量。这一功能允许...

    文本域定位光标并添加数据

    在IT领域,文本域是用户界面(UI)设计中常见的一种元素,用于用户输入文本,如在网页表单中填写姓名、邮箱等信息。本文将深入探讨如何在文本域中进行光标定位以及如何在特定位置添加数据。这些功能对于构建交互性强...

    javascript 光标定位例子

    在这个"javascript 光标定位例子"中,我们关注的是如何在网页文本输入框内实现光标定位的功能,比如在微博应用中实现“@”功能。当用户在输入框中输入“@”时,通常会弹出一个下拉菜单供用户选择用户名,而在此过程...

    光标定位方法

    在网页开发中,光标定位是一项重要的功能,它涉及到文本编辑器、表单输入等交互式应用。本文将详细介绍不同浏览器环境下实现光标定位的方法。 #### 一、获取光标位置 获取光标位置通常有两种方式:一种是针对IE...

    chrome、firefox、IE中input输入光标位置错位解决方案

    本文主要探讨的是在Chrome、Firefox和IE浏览器中,`&lt;input&gt;` 输入框内光标位置出现错位的问题及其解决方案。 问题的起因在于开发者通常会为了美观或者功能需求,使用背景图片来模拟`&lt;input&gt;`输入框的样式,并通过...

    页面一载入光标定位到文本框,并选中其中文字

    在网页设计和开发中,有时候我们需要实现这样的功能:当页面加载完成后,自动将光标定位到特定的文本框,并选中文本框内的全部文字。这个功能常见于表单填写、搜索框或者任何需要用户快速输入的场景,可以提高用户...

    Javascript 获取光标位置

    JavaScript获取光标位置是网页开发中的一个重要功能,它在用户输入、文本编辑或者富文本处理等场景中扮演着关键角色。这个功能可以帮助开发者精确地控制用户在文本输入框中的光标定位,例如在某些特定字符后插入文本...

    获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍

    在网页开发中,常常需要获取用户在输入框、文本区域或可编辑的div元素中光标的位置,以便实现某些特定功能。由于不同浏览器(如IE、Firefox和Chrome)之间存在兼容性差异,因此统一实现这一功能具有一定的挑战性。...

    JavaScript记录光标在编辑器中位置的实现方法_.docx

    JavaScript记录光标在编辑器中位置的实现方法是网页交互中的一个重要功能,它涉及到用户输入时的光标定位。在富文本编辑器或者简单的文本输入框中,有时我们需要记录用户在输入时光标的位置,以便在某些操作后能恢复...

    IF、FF兼容,TextBox获得焦点后,光标停在最后

    在网页开发中,不同浏览器对于某些功能的实现可能存在差异,例如JavaScript中的文本框(TextBox)光标定位。"IF"通常指的是Internet Explorer(IE),而"FF"则是Firefox。当用户点击TextBox时,我们希望光标自动移动...

    input输入框删除文字效果js代码

    在网页开发中,输入框(Input)是用户与页面交互的重要元素,常见于表单提交、搜索功能等。为了提供更好的用户体验,许多网站会添加一些交互特效,例如本例中的"input输入框删除文字效果js代码"。这个特效使得用户在...

    web开发光标停在文字最后 防止前台页面撑开

    在Web开发中,有时我们需要实现一个功能,即当用户聚焦到某个输入框时,光标会自动跳转到最后的位置。这可以提高用户体验,减少用户的手动操作。根据给定的内容中的代码示例,我们可以通过JavaScript来实现这一需求...

    css3光标闪烁动态输入打字动画特效

    这里,我们可以使用伪元素:before来创建光标效果,将其定位在输入区域的末尾,并应用上述定义的动画。 ```html &lt;input type="text" id="typingInput"&gt; ``` ```css #typingInput { position: relative; } #...

    将光标定位到textarea的某一行的javascript代码

    在网页开发中,有时我们需要实现一个功能,让用户能够快速地将光标定位到`textarea`元素的特定行。这个功能可以提升用户体验,特别是在处理大量文本输入时。在给定的标题和描述中,我们看到一个JavaScript函数`goL...

    在kindEditor中获取当前光标的位置索引的实现代码

    在网页富文本编辑器开发中,KindEditor是一个广泛使用的开源编辑器,它提供了丰富的功能和良好的用户体验。在处理用户输入时,有时我们需要获取光标在编辑器中的位置,例如为了插入特定内容、高亮选择或者执行其他...

    javascript textarea光标定位方法(兼容IE和FF)

    在本文中,我们将探讨如何在 textarea 元素中实现光标定位,同时确保兼容 Internet Explorer(IE)和 Firefox(FF)这两种主要的浏览器。 在 textarea 中设置光标位置是一个常见的需求,特别是在用户交互场景中,如...

    jQuery插件datalist实现很好看的input下拉列表

    本文介绍的内容是关于如何利用jQuery实现HTML5中定义的input元素类型为datalist的下拉列表功能。...这种情况下,利用jQuery插件来实现datalist的功能,可以作为在旧浏览器上实现现代网页功能的一个有效途径。

    js/html光标定位的实现代码

    光标定位在前端技术中通常指代将焦点放置于某个可输入元素如文本框(input text)或文本区域(textarea)中,以便用户可以直接输入或编辑内容。实现光标定位的方法多种多样,可以通过JavaScript或HTML的原生方法来...

Global site tag (gtag.js) - Google Analytics