问答中心分类: HTMLjQuery设置光标在文本区域中的位置
0
匿名用户 提问 13分钟 前

如何使用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);
15 Answers
0
mpen 回答 13分钟 前

这里有一个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
mpen 回复 13分钟 前

@杰西:不知道是怎么回事,我通常用4。修正了。

guzart 回复 13分钟 前

我会修改这个,接受一个论点if (!end) { end = start; } return this.each(...谢谢

mpen 回复 13分钟 前

@优步网:根据您的建议更新。

mpen 回复 13分钟 前

@Enve:我没有IE 5.5的副本可供测试,但那可能是因为jQuery不支持IE 5.5.

mpen 回复 13分钟 前

@雅罗斯拉夫扎鲁巴:是的。是的。但是允许你必须写作selectRange($('.my_input')[0], 3, 5)如果您已经在使用jQuery。此外,无论出于何种原因,如果您需要,它应该与多个元素一起工作。如果你想要纯天然的,请使用CMS的解决方案。

Jaroslav Záruba 回复 13分钟 前

@Mark我不反对原生JS

squadette 回复 13分钟 前

@马克,我必须把这个改成这个。setSelectionRange(…)。选择开始=开始;这选择结束=结束;这样它就可以在新的Firefox上运行了。

mpen 回复 13分钟 前

@谢谢你指出这一点。我根据你的建议进行了修复。

mareoraft 回复 13分钟 前

我需要补充$('#elem').focus()以使闪烁的光标出现。

kevinmicke 回复 13分钟 前

@谢谢你的提示。我发现这样链接它们是最干净的:$(“#elem”)。选择范围(5,10).focus();

0
HRJ 回答 13分钟 前

除了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;
};
jhummel 回复 13分钟 前

each函数返回jquery对象。所以你实际上可以做到:return this.each(function...)并删除独立行。

0
AVProgrammer 回答 13分钟 前

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

$.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.
Drew 回复 13分钟 前

对于textarea元素,对focusEnd的改进是添加this.scrollTop(this[0].scrollHeight);,以确保滚动文本区域以使插入点可见。

Justin 回复 13分钟 前

根据Mozilla的说法,我会直接避免使用任何使用createTextRangedeveloper.mozilla.org/en-US/docs/Web/API/TextRange

0
BobFromBris 回答 13分钟 前

这对我在Mac OSX上的Safari 5、jQuery 1.4中起到了作用:

$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;
gxmad 回复 13分钟 前

对我来说,直接访问并不能很好地工作,但这非常有效$(myID)。道具(’selectionStart’,位置)$(myID)。道具(’selectionEnd’,位置);

0
tofirius 回答 13分钟 前

我确实意识到这是一篇非常古老的帖子,但我认为我应该提供一个更简单的解决方案,只使用jQuery来更新它。

function getTextCursorPosition(ele) {   
    return ele.prop("selectionStart");
}

function setTextCursorPosition(ele,pos) {
    ele.prop("selectionStart", pos + 1);
    ele.prop("selectionEnd", pos + 1);
}

function insertNewLine(text,cursorPos) {
    var firstSlice = text.slice(0,cursorPos);
    var secondSlice = text.slice(cursorPos);

    var new_text = [firstSlice,"\n",secondSlice].join('');

    return new_text;
}

使用ctrl-enter添加新行的用法(如在Facebook中):

$('textarea').on('keypress',function(e){
    if (e.keyCode == 13 && !e.ctrlKey) {
        e.preventDefault();
        //do something special here with just pressing Enter
    }else if (e.ctrlKey){
        //If the ctrl key was pressed with the Enter key,
        //then enter a new line break into the text
        var cursorPos = getTextCursorPosition($(this));                

        $(this).val(insertNewLine($(this).val(), cursorPos));
        setTextCursorPosition($(this), cursorPos);
    }
});

我愿意接受批评。非常感谢。
更新:此解决方案不允许正常的复制和粘贴功能工作(即ctrl-c、ctrl-v),因此我必须在将来编辑此功能,以确保零件再次工作。如果你有一个想法如何做到这一点,请在这里发表评论,我会很高兴地测试出来。谢谢