jQuery 在文本区域设置光标位置

IT技术 javascript jquery html textfield
2021-02-02 04:30:29

如何使用 jQuery 在文本字段中设置光标位置?我有一个包含内容的文本字段,我希望用户光标在他们关注该字段时定位在某个偏移量处。代码应该看起来像这样:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

该 setCursorPosition 函数的实现是什么样的?如果您有一个内容为 abcdefg 的文本字段,此调用将导致光标定位如下:abcd**|**efg。

Java 有一个类似的函数,setCaretPosition。javascript 是否存在类似的方法?

更新:我修改了 CMS 的代码以使用 jQuery,如下所示:

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);
6个回答

这是一个 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,5); // select a range of text
$('#elem').selectRange(3); // set cursor position
@JaroslavZáruba:是的。这是。但是如果您已经在使用 jQuery,则允许您不必编写selectRange($('.my_input')[0], 3, 5)此外,如果您需要,无论出于何种原因,它都应该与多个元素一起使用。如果你想要纯原生,请使用CMS的解决方案。
2021-03-11 04:30:29
@Jesse:不知道这是怎么发生的,我通常使用 4。已修复。
2021-03-14 04:30:29
@Enve:我没有要测试的 IE 5.5 副本,但这可能是因为jQuery 不支持 IE 5.5
2021-03-17 04:30:29
我需要$('#elem').focus()事先添加以使闪烁的光标出现。
2021-03-25 04:30:29
@UberNeet:根据您的建议更新。
2021-04-02 04:30:29

我有两个功能:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

然后你可以像这样使用 setCaretToPos :

setCaretToPos(document.getElementById("YOURINPUT"), 4);

带有 atextarea和 an 的实时示例input,展示了 jQuery 的使用:

截至 2016 年,已在 Chrome、Firefox、IE11,甚至 IE8 上进行测试和工作(请参阅此处的最后一个;Stack Snippets 不支持 IE8)。

为什么会需要 collapse(true) ,因为您要设置结束和开始选择偏移?
2021-03-14 04:30:29
我似乎无法让它与我的脚本一起使用。我有一个在页面加载时为空的文本区域,然后在使用应用程序时由 javascript 填充。我希望在每次新写入之前将插入符号返回到 0(使用记录)。是不是动态数据导致了我的问题?如果是这样,我怎么能解决这个问题?
2021-03-25 04:30:29
字符串文字“字符”的意义是什么?是否需要使用该特定字符串?
2021-03-28 04:30:29
根据 createTextRange 应该避免。developer.mozilla.org/en-US/docs/Web/API/TextRange
2021-03-31 04:30:29
@mareoraft:在 Chrome、Firefox、IE8 和 IE11 上为我工作textarea(和input)。
2021-04-08 04:30:29

除了 jQuery 扩展代码之外,这里的解决方案是正确的。

扩展函数应该迭代每个选定的元素并返回this支持链接。这是 一个正确的版本:

$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};
each 函数返回 jquery 对象。所以你实际上可以这样做:return this.each(function...)并删除独立行。
2021-03-26 04:30:29

我找到了一个适合我的解决方案:

$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    var input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
            return this;
}

现在您可以通过调用将焦点移动到任何元素的末尾:

$(element).focusEnd();

或者你指定位置。

$(element).setCursorPosition(3); // This will focus on the third character.
根据 Mozilla 的说法,我会直接避免使用任何使用的东西createTextRange- developer.mozilla.org/en-US/docs/Web/API/TextRange
2021-03-10 04:30:29
对于 textarea 元素,对 focusEnd 的改进是添加了this.scrollTop(this[0].scrollHeight);,以确保滚动 textarea 以使插入点可见。
2021-03-15 04:30:29

这对我在 Mac OSX 上的 Safari 5、jQuery 1.4 上有效:

$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;
对我来说,直接访问不能正常工作,但这工作得很好。$(myID).prop('selectionStart', position); $(myID).prop('selectionEnd', position);
2021-03-28 04:30:29