在文本区域中设置光标位置的jQuery方法。

8 浏览
0 Comments

在文本区域中设置光标位置的jQuery方法。

如何使用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);

0

3 答案

0 Comments

问题出现的原因是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...)，并移除单独的一行代码。

0
0 Comments

jQuery Set Cursor Position in Text Area问题的出现原因是在使用JavaScript的setSelectionRange方法时，无法在TextArea或Input中设置光标位置。解决方法是使用两个函数setSelectionRange和setCaretToPos来实现。

第一个函数setSelectionRange用于设置TextArea或Input中的光标位置。该函数首先判断浏览器是否支持setSelectionRange方法，如果支持，则将焦点聚焦到输入框上，并使用setSelectionRange方法设置光标位置。如果浏览器不支持setSelectionRange方法，则使用createTextRange方法来设置光标位置。

第二个函数setCaretToPos用于将光标定位到指定位置。该函数调用setSelectionRange函数，并将输入框和光标位置作为参数传入。

在给定的示例中，可以通过调用setCaretToPos函数来设置光标位置。示例中使用了一个TextArea和一个Input，分别通过点击按钮来设置光标位置。通过给按钮绑定点击事件，调用setCaretToPos函数，并传入相应的输入框和光标位置来实现设置光标位置的功能。

这个方法在Chrome、Firefox、IE11甚至IE8上经过测试，均有效。可以通过动态数据来设置光标位置，不会引起任何问题。

在代码中出现的collapse(true)方法是为了在设置光标位置之前将TextRange折叠。这个方法的作用是将TextRange的范围折叠成一个点，以便设置起始和结束的偏移量。在该示例中，使用collapse(true)方法将TextRange折叠到起始位置，然后再使用moveEnd和moveStart方法来设置偏移量。

字符串'character'的含义是指定TextRange的单位为字符。在使用moveEnd和moveStart方法时，需要指定单位为字符，以便正确地移动TextRange的范围。

根据文档developer.mozilla.org/en-US/docs/Web/API/TextRange，应避免使用createTextRange方法。这是因为createTextRange方法是IE浏览器特有的方法，不是标准的JavaScript方法。在跨浏览器兼容性方面，建议使用setSelectionRange方法来设置光标位置。

0
0 Comments

jQuery Set Cursor Position in Text Area的问题出现的原因是，使用jQuery的默认方法无法直接设置文本区域中的光标位置。为了解决这个问题，可以使用自定义的jQuery函数来实现设置光标位置的功能。

解决方法是在文本区域中添加一个自定义的jQuery函数，名为selectRange。这个函数可以接受两个参数，分别是光标的起始位置和结束位置。如果只提供了一个参数，则光标的起始位置和结束位置相同。函数会遍历文本区域的每个元素，然后根据浏览器支持的不同方式来设置光标位置。

具体的实现代码如下：

$.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); // 选择一段文本
$('#elem').selectRange(3); // 设置光标位置

如果想了解更多相关信息，可以参考以下链接：

- [JsFiddle](http://jsfiddle.net/mnpenner/WpqsN/2291/)

- [JsBin](https://jsbin.com/vayoso/1/edit?html,js,output)

根据用户的反馈，有一些改进的建议和问题解答：

- 有用户建议修改函数的实现方式，只接收一个参数，并在函数内部判断和处理起始位置和结束位置相等的情况。

- 有用户指出在新版的Firefox浏览器中，原始的设置光标位置的代码无法正常工作，需要将`this.setSelectionRange(...)`改为`this.selectionStart = start; this.selectionEnd = end;`。

- 有用户提到在调用设置光标位置的函数之前，需要先使用`$('#elem').focus()`来使光标出现在文本区域中。

- 有用户建议将设置光标位置和聚焦文本区域的代码链式调用，即`$('#elem').selectRange(5, 10).focus();`。

总之，使用自定义的jQuery函数可以解决在文本区域中设置光标位置的问题，并且可以根据用户的反馈和需求进行改进和优化。

0