在 html 文本框中设置键盘插入符号位置 [英] Set keyboard caret position in html textbox

问题描述

有人知道如何将文本框中的键盘插入符号移动到特定位置吗?

Does anybody know how to move the keyboard caret in a textbox to a particular position?

例如，如果一个文本框(例如输入元素，而不是文本区域)中有 50 个字符，而我想将插入符号放在字符 20 之前，我该怎么做?

For example, if a text-box (e.g. input element, not text-area) has 50 characters in it and I want to position the caret before character 20, how would I go about it?

这是与这个问题的区别:jQuery Set Cursor Position in Text Area ，这需要 jQuery.

This is in differentiation from this question: jQuery Set Cursor Position in Text Area , which requires jQuery.

推荐答案

摘自 Josh Stodola 的 使用 Javascript 在文本框或文本区域中设置键盘插入符号位置

Excerpted from Josh Stodola's Setting keyboard caret Position in a Textbox or TextArea with Javascript

允许您在文本框或文本区域的任何位置插入插入符号的通用函数:

A generic function that will allow you to insert the caret at any position of a textbox or textarea that you wish:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

第一个预期参数是您希望插入键盘插入符号的元素的 ID.如果无法找到该元素，则不会发生任何事情(显然).第二个参数是插入符号位置索引.零会将键盘插入符号放在开头.如果传递的数字大于元素值中的字符数，则会将键盘插入符放在末尾.

The first expected parameter is the ID of the element you wish to insert the keyboard caret on. If the element is unable to be found, nothing will happen (obviously). The second parameter is the caret positon index. Zero will put the keyboard caret at the beginning. If you pass a number larger than the number of characters in the elements value, it will put the keyboard caret at the end.

在 IE6 及更高版本、Firefox 2、Opera 8、Netscape 9、SeaMonkey 和 Safari 上测试.不幸的是，在 Safari 上它不能与 onfocus 事件结合使用).

Tested on IE6 and up, Firefox 2, Opera 8, Netscape 9, SeaMonkey, and Safari. Unfortunately on Safari it does not work in combination with the onfocus event).

使用上述函数强制键盘插入符号在获得焦点时跳转到页面上所有textarea的末尾的示例:

An example of using the above function to force the keyboard caret to jump to the end of all textareas on the page when they receive focus:

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

这篇关于在 html 文本框中设置键盘插入符号位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！