`

输入框光标定位实现

 
阅读更多

 

     /*
      *Cross browser routine for getting selected range/cursor position
      */
    function getElementSelection(that) {
        var position = {};
        if (that.selectionStart === undefined) {
            that.focus();
            var select = document.selection.createRange();
            position.length = select.text.length;
            select.moveStart('character', -that.value.length);
            position.end = select.text.length;
            position.start = position.end - position.length;
        } else {
            position.start = that.selectionStart;
            position.end = that.selectionEnd;
            position.length = position.end - position.start;
        }
        return position;
    }
    /**
     * Cross browser routine for setting selected range/cursor position
     */
    function setElementSelection(that, start, end) {
        if (that.selectionStart === undefined) {
            that.focus();
            var r = that.createTextRange();
            r.collapse(true);
            r.moveEnd('character', end);
            r.moveStart('character', start);
            r.select();
        } else {
            that.selectionStart = start;
            that.selectionEnd = end;
        }
    }

 

 

分享到:
评论

相关推荐

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

    总的来说,将光标定位到输入框最右侧是一种常见的前端交互需求,通过结合使用`focus`方法和对输入框值的操作,我们可以实现这一功能。这种技术在各种富文本编辑器、动态表单和自定义编辑场景中都有应用,提升了用户...

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

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

    点击文本框,光标定位到首位置

    点击文本框,光标定位到首位置,Javascript实现的,效果不错。

    javascript 光标定位例子

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

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

    2. **保持光标定位到末尾**: - 当用户在输入过程中切换显示状态,或者在显示明文密码后重新变为隐藏,光标位置可能会丢失。为此,我们可以编写一个函数来将光标移动到输入框的末尾。 ```javascript function ...

    cocos2d-x带光标的输入框

    本教程将详细讲解如何在cocos2d-x中封装CCTextFieldTTF以实现一个带有光标的输入框。 首先,我们要理解CCTextFieldTTF是cocos2d-x提供的一种文本输入组件,它可以显示单行或多行的固定宽度文本,并支持动态改变文字...

    jQuery.curpos.js插件获textarea输入框下光标的位置.zip

    《jQuery.curpos.js插件:掌握输入框光标位置的奥秘》 在网页开发中,与用户交互的表单元素如textarea常常需要细致的控制,例如获取或设置光标位置,这在实现某些特定功能时是必不可少的。jQuery作为一款广泛使用的...

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

    在本文中,我们主要通过JavaScript来实现一个自定义函数,用于实现光标定位的功能。这种方法不仅可以帮助我们更好地控制页面元素,还可以在特定条件下提供更加个性化的用户体验。 首先,光标定位的基本实现原理是...

    输入框插件

    首先,输入框插件的基本功能包括文本输入、文本选择、光标定位、回车提交等。在网页开发中,这些功能通常通过HTML的`<input type="text">`元素实现,而在此插件中,可能还会包含额外的样式和行为增强,如自动补全、...

    Vue中div contenteditable 的光标定位方法

    4. 光标定位的具体实现: 我们可以创建一个名为`keepLastIndex`的函数,该函数能够获取当前窗口的选择范围(Range),并将其移动到div的末尾。这样无论内容如何更新,光标都会被正确地放置在最后。 在函数中,首先...

    vue项目移动端实现ip输入框问题

    另外,开发者通过自定义指令来监听不同的事件,比如@blur、@keyup和@keydown,以实现输入验证和光标定位等功能。当输入无效时(比如,输入了非数字的字符),可以通过e.preventDefault()方法阻止默认行为,并且通过...

    vue实现输入框自动跳转功能

    在Vue.js框架中,实现输入框自动跳转功能主要用于提高用户体验,使得用户在输入特定内容时,能够自动在多个输入框之间切换,无需手动点击或使用方向键。本实例主要展示了如何利用Vue的模板语法、事件监听器以及数据...

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

    这里,当输入框(`<input>`)获得焦点时,`cursorEnd()`函数会被执行,从而实现将光标定位到输入框文本的最后。 需要注意的是,这段代码只适用于兼容IE的环境,因为`createTextRange()`方法是非标准的,且在现代...

    easyui datagrid实现实现上下左右和回车切换单元格

    根据提供的文件信息,本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...

    vb ip地址输入框 源码

    开发者需要实现这种布局,可以通过调整控件的宽度和定位,或者创建四个独立的文本框来实现。同时,要确保输入框在获得焦点时,光标在正确的位置开始。 5. **错误提示**: 当用户输入无效的IP地址时,程序应提供...

    基于jQuery的输入框在光标位置插入内容, 并选中

    总结来说,该段代码通过jQuery的扩展功能,提供了一种在输入框中任意位置插入文本并进行选择的方法,解决了原生JavaScript在不同浏览器之间兼容性的问题,同时考虑了光标定位和文本选择的细节。这对于开发者在实际...

    EmojiconTextview带表情的输入框

    4. **光标定位**:当插入表情后,光标的正确定位至关重要。这涉及到计算文字和表情的宽度,确保光标在正确的位置出现。 5. **表情解析**:当用户输入包含表情Unicode的字符串时,需要解析字符串,将表情字符替换为...

    实现按钮滑动屏幕来定位文字光标

    在我们编程中文字输入框的文字光标定位在屏幕较小时是十分烦人的事情,这份代码提供了一种可能的解决方案。在弹出键盘上加上一个按钮,手指按下按钮,并且保持按钮处于按下状态,然后随便在屏幕上滑动手指,便可以...

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

    接下来是CSS部分,主要任务是定位和样式化删除按钮,使其看起来像是输入框的一部分。可以这样设置: ```css #search-input { width: 300px; padding: 10px 50px 10px 10px; /* 增加右侧内边距以容纳删除按钮 */ ...

Global site tag (gtag.js) - Google Analytics