jQuery:将文本区域滚动到给定位置

2024-05-29

我有一个包含很多文本的文本区域:

<textarea cols="50" rows="10" id="txt">lots and lots of text goes here</textarea>

我想向下滚动文本区域,以便用户可以看到第 2000 个字符。我如何使用 javasctipt/jQuery 来做到这一点?

$('#txt').scrollToCharNo(2000); // something like this would be great

编辑(我的解决方案)

好吧,我自己设法让它发挥作用。我发现的唯一方法是创建一个与文本区域具有相同字体和宽度的 DIV,在所需字符附近放置一个 SPAN 并找到该跨度的位置。

我确信,有人可能会发现我的解决方案有用,所以我将其粘贴在这里:

jQuery.fn.scrollToText = function(search) {
    // getting given textarea contents
    var text = $(this).text();
    // number of charecter we want to show
    var charNo = text.indexOf(search);
    // this SPAN will allow up to determine given charecter position
    var anch = '<span id="anch"></span>';
    // inserting it after the character into the text
    text = text.substring(0, charNo) + anch + text.substring(charNo);

    // creating a DIV that is an exact copy of textarea
    var copyDiv = $('<div></div>')
                    .append(text.replace(/\n/g, '<br />')) // making newlines look the same
                    .css('width', $(this).attr('clientWidth')) // width without scrollbar
                    .css('font-size', $(this).css('font-size'))
                    .css('font-family', $(this).css('font-family'))
                    .css('padding', $(this).css('padding'));

    // inserting new div after textarea - this is needed beacuse .position() wont work on invisible elements
    copyDiv.insertAfter($(this));
    // what is the position on SPAN relative to parent DIV?
    var pos = copyDiv.find('SPAN#anch').offset().top - copyDiv.find('SPAN#anch').closest('DIV').offset().top;
    // the text we are interested in should be at the middle of textearea when scrolling is done
    pos = pos - Math.round($(this).attr('clientHeight') / 2);
    // now, we know where to scroll!
    $(this).scrollTop(pos);
    // no need for DIV anymore
    copyDiv.remove();
};


$(function (){
    $('#scroll_button').click(
        function() {
            // scrolling to "FIND ME" using function written above
            $('#txt').scrollToText('FIND ME');
            return false;
        }
    );
});

这是一个演示(它有效!):http://jsfiddle.net/KrVJP/ http://jsfiddle.net/KrVJP/

由于没有一个答案真正解决了问题,我会接受experimentX的答案:感谢您为帮助我付出的努力,我很感激!


我不确定它是否会起作用。还请检查一下here http://jsfiddle.net/ZY8az/2/。它似乎适用于第 2000 个、第 1500 个和第 1000 个位置。

EDIT混淆字体大小或行高???

 $(function (){
    var height = 2000/$('#txt').attr('cols');

    $('#txt').scrollTop(height*13);

    $('#txt').selectRange(2000,2000); //this is just to check
});

$.fn.selectRange = function(start, end) { //this is just to check 
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            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();
        }
    });
};

UPDATE这个怎么样

    var height = 1200/$('#txt').attr('cols');
    var line_ht = $('#txt').css('line-height');
    line_ht = line_ht.replace('px','');

    height = height*line_ht; 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery:将文本区域滚动到给定位置 的相关文章

随机推荐

  • 作出选择之后、提交上传之前的 asp.net FileUpload 事件

    我想显示通过 FileUpload 控件的浏览按钮选择的文件的大小 理想情况下 该值在用户选择文件后但在单击 上传文件 按钮之前立即显示 我有一个网络表格 按钮看起来像这样
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • 使用 CMake 时如何导出 Emscripten 中的 C 函数

    In 本教程 https emscripten org docs porting connecting cpp and javascript Interacting with code html interacting with code
  • 在 CPP 类中将 C 函数声明为友元

    我需要在 C 函数中使用类的私有变量 我正在做这样的事情 class Helper private std string name public std getName return name friend extern C void in
  • 绘制平滑曲线

    我想创建更平滑的曲线 而不仅仅是线角 这是我现在画的图 这是我的代码 case FREEHAND float pts float ptk ptk new float 2 imageMatrix invert inv if mCurrentS
  • jquery 中的函数返回未定义[重复]

    这个问题在这里已经有答案了 我在 jquery 中调用的函数返回未定义 我检查了该函数 当我对其进行调试时 它返回正确的数据 function addToPlaylist component type add to pl value pl
  • 使用 Google App Engine 向防火墙后面的设备发起消息

    我想使用 Google App Engine 向位于防火墙 路由器 NAT 后面的设备发起 http 流量 这些设备将接收来自 GAE 的命令 我可以让设备轮询 GAE 来查找新消息 但这会占用大量流量 或者 我可以尝试永久保持打开连接 但
  • Apache Spark 中的高效字符串匹配

    我使用 OCR 工具从屏幕截图中提取文本 每个大约 1 5 句话 然而 当手动验证提取的文本时 我注意到时不时会出现一些错误 鉴于文本 你好 我真的很喜欢 Spark 我注意到 1 像 I 和 l 这样的字母被 替换 2 表情符号未被正确提
  • 如何绑定值 INSERT INTO mysql perl

    我有下面的代码可以工作 但我需要知道如何绑定它们以确保安全 如果我只是将 new row 替换为 并将其放入执行中我收到错误 感谢您的帮助 foreach my field account field order new row param
  • Grpc - 将消息从一个客户端发送到连接到同一服务器的另一个客户端

    是否可以将消息从一个客户端发送到连接到同一服务器的另一个客户端 我想将数据从一个客户端发送到服务器然后发送到特定客户端 我想我需要获取客户端 ID 但我不知道如何获取此 ID 以及如何从服务器将此消息发送到该客户端 我这里有一个样本 这是一
  • 将类对象放置在向量中?

    我注意到我可以将一个类放置在一个向量中 这是我的程序 我收到以下错误 out blackjack exe blackjack obj blackjack obj error LNK2019 unresolved external symbo
  • Environment.CurrentDirectory 与 System.IO.Directory.GetCurrentDirectory

    我正在编写一个 Net WinForms 并不断在调试和发布配置之间切换 并且有一些文件我需要任一配置才能访问 我想做的是将文件放在 BIN 文件夹中的公共目录中 这样它看起来像这样 MyProject Bin CommonFiles My
  • 如何处理致命错误:cURL错误7:无法连接到xxxx端口443

    我有一个连接到第三方 API 的脚本 它是并且应该在 24 7 不间断循环上运行 我在重新启动循环之前在最后使用睡眠 问题是 有时第三方 API 会被拒绝 或者连接会因以下错误而中断 致命错误 未捕获的异常 GuzzleHttp Ring
  • Http 标头已删除 Azure Web 应用程序

    我在 Azure 上托管的 Web 应用程序遇到问题 该应用程序是一个用于身份验证 授权的identityserver4应用程序 asp net core 此应用程序可以在本地运行 但不能在 Azure 上运行 通过跟踪来自服务器的响应标头
  • PySide6.1 与 matplotlib 3.4 不兼容

    当我只安装PySide6时 GUI程序运行良好 但是一旦我安装了matplotlib及其依赖包 包括pyqt5 则GUI程序将无法运行并输出以下错误消息 This application failed to start because no
  • FFMPEG - 具有持续时间过滤器问题的连接解复用器

    我正在尝试使用图像生成视频ffmpeg concat 解复用器 我正在创建一个带有图像文件路径的文本文件 由于图像的持续时间可能不同 我正在使用duration过滤器指定每个图像的持续时间 示例文本文件如下 文件1 jpg 持续时间3 文件
  • 作为 ViewPager 的一部分更新 ListFragment 中的数据

    我在 Android 中使用 v4 兼容性 ViewPager 我的 FragmentActivity 有一堆数据 这些数据将以不同的方式显示在我的 ViewPager 的不同页面上 到目前为止 我只有同一个 ListFragment 的
  • 在拇指上方显示修改后的 JSlider 值

    有没有一种简单的方法可以在使用某些 外观和感觉 的同时更改 JSlider 上方标签中显示的值 为了清楚起见 我正在谈论这个值 具体来说 我想显示除以 1000 的值而不是值本身 我知道如果我显示它们 我可以为刻度设置标签 但用户将不得不猜
  • log4j-extras MaxBackupIndex 或类似的

    我正在使用 log4j extras 1 2 17 org apache log4j rolling RollingFileAppender with a org apache log4j rolling TimeBasedRollingP
  • jQuery:将文本区域滚动到给定位置

    我有一个包含很多文本的文本区域