在 textarea 中显示行号

Posted 2023-05-07

【中文标题】在 textarea 中显示行号

【英文标题】：Display line number in textarea

【发布时间】：2012-01-15 22:18:45

【问题描述】：

我想在文本区域中显示行号，这在 jQuery 中是可能的：

我在 SO 上寻找答案，但找不到我想要的

Display current line and column number for a textarea

Limit number of lines in textarea and Display line count using jQuery

此外，我从 cmets 提供的 JSFiddle 中尝试的解决方案向我展示了这样的文本区域：

哪一行1234是第一行，第二行是5678

【问题讨论】：

html adding line numbers to textarea的可能重复

@JamesHill 我试过没用

我刚刚从第一个示例中复制粘贴到 jsFiddle 中，并在 30 秒或更短的时间内完成工作 - jsfiddle.net/JamesHill/jMZKz

您到底尝试了什么？链接的线程列出了您的问题的几个解决方案。如果您尝试实现其中一个但不起作用，请描述您已经尝试过的内容并发布代码，以便我们为您提供帮助。

@Simon 我尝试了james提供的代码

【参考方案1】：

在此处下载插件：http://alan.blog-city.com/jquerylinedtextarea.htm

用法：

$(function() 

  // Target all classed with ".lined"
  $(".lined").linedtextarea(
    selectedLine: 1
  );

  // Target a single one
  $("#mytextarea").linedtextarea();

);

全功能演示：http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html (web.archive)

【讨论】：

对于那些使用word-wrap: break-word的人有什么解决方案吗？

提供的链接似乎已失效。可以找到新链接here。测试插件 witj jQuery 1.8，当浏览器挂起（Chrome 和 Firefox）时它不能正常工作。试图缩小问题。

您是否有机会将其更新为响应式，以便 textarea 调整大小（并占用其父级的宽度）？无论如何，很棒的工作！我会尝试编辑，但对我来说，在那个 .js 文件中它是相当高端的！ :)