如何使用 jQuery 設定遊標位置或選擇文字區域中的文字？

如何使用jQuery 設定文字區域中的遊標位置

$.fn.selectRange() 函數可讓您輕鬆設定遊標位置或使用jQuery 在文字區域中選擇文字範圍。

以下是您可以如何操作使用它：

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if(this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

使用此函數，您可以透過提供單一參數來設定遊標位置，如下所示：

$('#elem').selectRange(3); // set cursor position

或者，您可以透過以下方式選擇文字範圍提供兩個參數：

$('#elem').selectRange(3,5); // select a range of text

此函數透過檢查瀏覽器是否支援SelectionStart 和 SelectionEnd 屬性來運作。如果是，它會使用它們來設定遊標位置或選擇範圍。否則，它使用大多數瀏覽器都支援的 setSelectionRange() 方法。最後，如果這兩種方法都不可用，則函數將回退到使用 createTextRange() 方法，該方法在 Internet Explorer 中可用。

以下是如何使用此函數的一些方便範例：

• 選取文字區域中的所有文字：

$('#elem').selectRange(0, $('#elem').val().length);

• 設定遊標到文字區域中文字的末尾：

$('#elem').selectRange($('#elem').val().length);

• 在文字區域中選擇特定範圍的文字：

$('#elem').selectRange(3, 7);

您可以在JsFiddle 和 JsBin 上找到該功能的現場演示。

以上是如何使用 jQuery 設定遊標位置或選擇文字區域中的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！