`

输入框光标定位实现

 
阅读更多

 

     /*
      *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来实现一个自定义函数,用于实现光标定位的功能。这种方法不仅可以帮助我们更好地控制页面元素,还可以在特定条件下提供更加个性化的用户体验。 首先,光标定位的基本实现原理是...

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

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

    输入框插件

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

    Vue中div contenteditable 的光标定位方法

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

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

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

    enter键控制input光标移动到下一个框

    本文将深入探讨如何利用HTML和jQuery实现"Enter"键控制input光标移动的功能,使得用户在按下"Enter"键时,光标能够根据预设逻辑在不同的输入框间自动移动。 首先,我们需要理解HTML中的`<input>`标签,它是用于创建...

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

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

    vb ip地址输入框 源码

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

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

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

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

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

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

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

Global site tag (gtag.js) - Google Analytics