`
lucky_god
  • 浏览: 37534 次
社区版块
存档分类
最新评论

JavaScript获取焦点并将光标移动到末尾字符

阅读更多
测试和使用环境:
Google Chrome浏览器,手动触发焦点事件(如按键盘↑键)
代码如下:
function focusOn(_textarea, moveToLast){
    this.moveToLastFlag = moveToLast;
    function moveToTextEnd() {
        if (this.moveToLastFlag){
            if (typeof _textarea.selectionStart == "number") {
                _textarea.selectionStart = _textarea.selectionEnd = _textarea.value.length;
            } else if (typeof _textarea.createTextRange != "undefined") {
                _textarea.focus();
                var range = _textarea.createTextRange();
                range.collapse(false);
                range.select();
            }
        }
    }

    _textarea.focus();
    _textarea.onfocus = function(e){
        moveToTextEnd();
        // Work around Chrome's little problem
        if (window.chrome){
            window.setTimeout(function() {
                moveToTextEnd();
            }, 1);
        }
    }

}

参考 http://jsfiddle.net/ghAB9/3/

附键盘监听代码
        document.onkeydown = function(e){
            switch (e.which){
                case 9:     //tab

                    break;
                case 13:    //enter

                    break;
                case 38:    //up
                    
                    break;
                case 40:    //down
                    
                    break;
            }

        };
分享到:
评论

相关推荐

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

    例如,要将光标移动到输入框的末尾: ```javascript // 设置光标位置到末尾 input.selectionStart = input.value.length; input.selectionEnd = input.value.length; ``` 如果要在特定位置插入文本,可以先保存旧...

    JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    在JavaScript中,对文本框(TextArea)进行操作是常见的需求,比如在光标位置插入文字并把光标移动到新插入文字的末尾。这里主要涉及两种浏览器环境下的处理方式:IE和其他现代浏览器(Firefox, Chrome, Safari, ...

    js实现获取焦点后光标在字符串后

    这种技巧的原理在于,当你改变了一个文本输入框的值并再次设置回相同的值时,浏览器会将光标移动到最后。因此,通过这种方式,我们实现了光标在字符串后的效果。 然而,这种方法的一个问题是它依赖于清空和重新赋值...

    jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

    这一操作看起来就像是将输入框的内容复制并粘贴,但由于是在同一个元素上操作,效果就是光标被移动到了末尾。 在具体的实现代码中,通常会有一个辅助函数(例如`setFocus`),这个函数负责处理将光标移动到指定元素...

    JS获取文本框光标位置、选中起始位置、终止位置、选择内容

    // 设置光标在第10个字符,并选中到第20个字符 ``` 6. **设置选中范围**: 同样,`setSelectionRange`方法也可用于设置选中区域,如: ```javascript input.setSelectionRange(5, 15); // 设置从第5个字符开始...

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

    这将使光标置于输入框的末尾,并准备接受新的输入。 为了在输入框获取焦点时自动调用`cursorEnd()`函数,我们在HTML中添加了一个`onfocus`事件监听器: ```html ()"> ``` 这里,当输入框(`<input>`)获得焦点时,`...

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

    在JavaScript中,我们可以获取输入区域的value值,然后逐字符地插入到页面的其他元素中,同时控制光标的闪烁暂停,以模拟打字的延迟。这需要结合setTimeout或requestAnimationFrame等函数来实现定时触发。 此外,...

    jQuery设置聚焦并使光标位置在文字最后的实现方法

    然而,这并不会自动将光标移动到文字的末尾。为了实现这一功能,我们需要自定义两个辅助函数:`.setCursorPosition()` 和 `.setSelection()`。 `.setCursorPosition(position)` 函数接收一个参数`position`,表示...

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

    这个操作会触发浏览器将光标移动到字符串末尾。 ```javascript input.value = ""; input.value = val; ``` 这样,当代码执行完毕,光标就会被正确地放置在输入框的最右侧,如下面的示例所示: ```html <p><input ...

    JavaScript自定义文本框光标

    这些操作对应的JavaScript事件处理涉及到获取按键代码、判断文本框内容以及调整光标位置的逻辑。 1. **左箭头**:按下左箭头时,如果文本框不是空的,光标需要向左移动一个位置。如果光标已经在文本开始位置,光标...

    jquery编写验证ip的input输入框,附带获取 input光标位置

    这通常通过JavaScript的`selectionStart`属性来实现,它可以返回光标在字符串中的位置。如果需要在输入IP时限制光标位置,例如在每个数字之间或末尾,我们还需要结合`selectionEnd`属性进行操作。 为了实现上述功能...

    Jquery内容插入光标处插件

    例如,`$`符号是jQuery的简写,用于创建jQuery对象,而`.append()`和`.prepend()`方法则可以将内容添加到元素的末尾或开头。 对于"内容插入光标处"的功能,这个插件的工作原理可能如下: 1. **获取光标位置**:...

    js移动焦点到最后位置的简单方法

    对于非原生的可编辑元素(例如contentEditable元素),可以使用`window.getSelection()`来获取当前的选区,并调用`collapse`方法将光标移动到元素的末尾。代码如下: ```javascript var sel, el = document....

    Javascript KeyCode大全

    - **End (35)**:结束键,通常用于将光标移动到文本末尾。 - **Home (36)**:起始键,通常用于将光标移动到文本开头。 - **Left (37)**:左箭头键,用于向左移动光标。 - **Up (38)**:上箭头键,用于向上移动光标。...

    javascript获得光标所在的文本框(text/textarea)中的位置

    此时,我们需要利用`createTextRange()`方法创建一个文本范围对象,并通过`moveToPoint()`方法移动到鼠标点击的位置。然后使用`moveStart()`方法计算出光标距离文本框起始位置的字符数。 以下是一个兼容各主流...

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

    上述代码中,`cc` 函数的作用是在文本框获得焦点时(通过 `onfocus` 事件触发),将光标移动到文本框内容的末尾。具体来说: - `var e = event.srcElement;` 获取当前事件的目标元素。 - `var r = e.createTextRange...

    javascript经典特效---状态栏打字机.rar

    为了实现打字效果,我们使用一个计时器(通常是`setInterval`函数),每隔一定时间插入一个字符到HTML元素中。每次插入字符后,我们还要检查是否已到达字符串末尾,如果到了,则清除计时器并可能执行其他动画,如...

    JavaScript事件和对象

    - **数组对象(Array)**:包含数组相关的操作,如`push()`添加元素到数组末尾,`join()`将数组元素连接成字符串。 JavaScript的事件和对象处理是创建动态网页和实现用户交互的基础。通过理解并熟练运用这些概念和...

    在光标处插入字符串的实现代码 兼容IE,Firefox

    接着,我们利用字符串拼接的方式将`myValue`插入到光标位置,并更新`value`属性。最后,我们需要重新设置光标位置,并恢复`scrollTop`。 如果浏览器既不支持`document.selection`也不支持`selectionStart`和`...

Global site tag (gtag.js) - Google Analytics