`
objet888
  • 浏览: 61286 次
  • 性别: Icon_minigender_1
  • 来自: 东莞
最近访客 更多访客>>
社区版块
存档分类
最新评论

光标在input中的定位

阅读更多
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(文档对象模型)操作和事件处理,对于创建动态和响应式的网页应用至关重要。本文将...

    移动端模拟数字键盘,保留两位小数,div模拟光标,div模拟input

    3. **div模拟光标**:在HTML中,`&lt;input&gt;`元素自带光标效果,但在div上模拟这一效果需要额外工作。可以创建一个较小的div作为光标,并通过CSS调整其位置。使用JavaScript监听用户的焦点和滚动事件,动态调整光标的...

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

    在给定的描述中,示例代码展示了如何使用`focus`方法使光标默认停留在`&lt;input&gt;`输入框内: ```html ('inputTxt').focus()"&gt; &lt;input type="text" id="inputTxt" /&gt; ``` 这段代码的工作原理如下: 1. `&lt;body&gt;`...

    input光标操作.html|input光标操作.html

    当opsStart和opsEnd相同时,可用于定位光标位置。 setSelectionRange实际上是改变了selectionStart 和 selectionEnd属性,所以也可以通过直接修改这两个属性来实现 方法二 input.selectionStart = opsStart; input...

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

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

    js javascript 文本框一边输入一边后面跟个空格,并且光标在字符串后空格前,光标定位

    标题 "js javascript 文本框一边输入一边后面跟个空格,并且光标在字符串后空格前,光标定位" 描述的是一个JavaScript技术问题,涉及到实时文本输入时的自定义格式化以及光标位置控制。在这个场景下,用户在文本框中...

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

    本文将深入探讨如何在文本域中进行光标定位以及如何在特定位置添加数据。这些功能对于构建交互性强、用户体验良好的应用程序至关重要。 首先,我们要理解“文本域”(Text Field)。在HTML中,`&lt;input type="text"&gt;...

    将光标定位于输入框最右侧实现代码

    在前端开发中,有时我们需要通过JavaScript来实现一些特殊交互效果,比如将光标自动定位到输入框的最右侧。这通常发生在用户不直接通过鼠标点击输入框,而是由程序逻辑控制光标位置的情况,比如编辑图片描述或使用...

    光标定位方法

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

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

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

    iOS11.3以下modal中input光标错位的解决方法

    iOS11.3以下modal中input光标错位的解决方法是指在iOS11.3以下的系统中,出现了input光标错位的问题,即在弹出层中输入框的光标位置不正确的问题。这个问题是由于iOS系统的BUG所导致的,幸运的是,在iOS11.3以后,这...

    javascript 光标定位例子

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

    汇编语言下的光标调整

    光标调整是汇编语言中一个重要的概念,通过设置光标的位置和属性,可以实现各种屏幕显示效果。在PC机屏幕上,光标的位置可以通过BIOS中断来设置,BIOS中断提供了一些功能号来控制光标的位置和属性。 实验一:设置...

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

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

    Javascript 获取光标位置

    这个功能可以帮助开发者精确地控制用户在文本输入框中的光标定位,例如在某些特定字符后插入文本或执行其他操作。 在JavaScript中,获取光标位置主要有两种方式: 1. **基于`input`或`textarea`元素**: 对于`...

    Vue中div contenteditable 的光标定位方法

    然而,当我们在Vue组件中处理这种输入时,经常遇到光标定位的问题,尤其是在程序控制下非人工输入后光标会丢失的问题。接下来将详细解释在Vue中如何控制div元素contenteditable的光标定位方法。 1. Vue中div...

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

    本文将介绍如何在IE、Firefox和Chrome中获取div编辑框、textarea和input text光标位置的方法,并提供相应的代码示例。 首先,了解不同浏览器对于光标位置获取的支持情况是必要的。例如,IE浏览器使用了document....

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

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

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

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

    JS将光标聚焦在文本最后的实现代码

    在JavaScript中,将光标聚焦在文本最后是一个常见的需求,特别是在输入框中用户需要立即开始输入时。在给定的代码示例中,一个简单的函数`cursorEnd()`被定义来实现这个功能。以下是对这段代码的详细解释: 首先,...

Global site tag (gtag.js) - Google Analytics