首页 > web前端 > js教程 > 如何设置 jQuery 文本区域中的光标位置?

如何设置 jQuery 文本区域中的光标位置?

DDD
发布: 2024-12-28 05:55:13
原创
128 人浏览过

How Can I Set the Cursor Position in a jQuery Text Area?

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

挑战:

需要一种方法来设置文本中的光标位置使用 jQuery 的区域。所需的行为是当字段聚焦时将光标定位在特定偏移处。

jQuery 解决方案:

$.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();
  }
};
登录后复制

用法:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});
登录后复制

这会将光标定位在文本中的第四个字符之后

替代解决方案:

$.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
登录后复制

以上是如何设置 jQuery 文本区域中的光标位置?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板