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

问题描述

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

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

例如，如果是文本框（例如输入元素，不是文本） -area）里面有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?

这是区别于这个问题：< a href =https://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area> jQuery设置文本区域中的光标位置，这需要jQuery。

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

推荐答案

摘自Josh Stodola的 使用Javascript 设置文本框或TextArea中的键盘插入位置

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).

使用上述功能强制键盘插页在获得焦点时跳转到页面上所有textareas的末尾的示例：

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屋！