带有输入键的文本框行号

Posted 2023-03-05

【中文标题】带有输入键的文本框行号

【英文标题】：Textbox line number with enter key press

【发布时间】：2013-07-19 01:52:57

【问题描述】：

我正在尝试实现一个文本插入字段，它应该自动为每一行编号（基于换行符）。

用户不能自行选择或删除数字，文本字段应从一开始就配置为编号列表。

这是在 JQuery 中完成的，我一直无法找到解决方案。

以下是我尝试过的，但它没有按需要工作。 我从LineAreaText Demo 得到了解决方案。

还有JSFIDDLE

但需要像jsfiddle文本框这样的结构：

---

1. here is first line.
2. when press enter key this two will add in this line and 
   now I am not pressing enter key so there is no next line 
   count.
3. Now pressed enter and third is there as line number.

---

我试过了

使用如上所述的可编辑 div 结构，但未能将其留空 当没有按下回车键且句子尚未完成时。 使用 ajax htmleditor 扩展器，但需要按顶部的有序列表图标按钮。

这是 JsFiddle 使用的和我需要做的一样的事情。

由于我现在陷入困境，因此非常感谢任何帮助或指导。

提前致谢。

【参考方案1】：

http://www.andrewmpeters.com/blog/how-to-detect-enter-keypress-with-javascript/

这会有帮助吗？

这是关于每当按下一个键时触发一个函数。 所以你可能只需要一个换行并将最后一个数字加 1 的函数。

+=1

Javascript 不是我最好的语言，所以我只能这样做。 希望我以正确的方式发送给您。

【参考方案2】：

几行 JavaScript 就可以解决问题。 http://jsfiddle.net/mkWhy/1/ 您只需处理 textarea 的 onkeyup 事件，将当前文本分成几行（在换行符 '\n' 上分割），遍历这些行并确保每行的开头都有正确的数字。

<textarea id="num" rows="5" cols="32">1. </textarea>

纯 JS

document.getElementById("num").onkeyup = function(e) 
    var evt = e ? e : event;
    if((evt.keyCode && evt.keyCode != 13) || evt.which != 13) 
        return;
    var elm = evt.target ? evt.target : evt.srcElement;
    var lines = elm.value.split("\n");
    for(var i=0; i<lines.length; i++)
        lines[i] = lines[i].replace(/(\d+\.\s|^)/, (i+1) + ". ");
    elm.value = lines.join("\n");

jQuery

$("#num").keyup(function(event) 
    if(event.which != 13)
        return;
    var elm = $(this);
    var lines = elm.val().split("\n");
    for(var i=0; i<lines.length; i++)
        lines[i] = lines[i].replace(/(\d+\.\s|^)/, (i+1) + ". ");
    elm.val(lines.join("\n"));
);

EDIT 这更符合 OP 的问题，一个 jsfiddle 类型的编号文本输入。 http://jsfiddle.net/qZqX8/

我使用两个 textarea，第一个设置为只读，并让它们彼此相邻。然后在输入文本区域上使用 keyup 和滚动事件。保持高度和滚动位置同步。

$(".numbered").scroll(function(event) 
    $(this).prev().height($(this).height());
    $(this).prev()[0].scrollTop = this.scrollTop;
);
$(".numbered").keyup(function(event) 
    var elm = $(this);
    var lines = elm.val().split("\n");
    var numbers = "";
    for(var i=0; i<lines.length; i++)
        numbers += (i+1) + "\n";
    elm.prev().val(numbers);
    elm.prev()[0].scrollTop = this.scrollTop;
);

EDIT 2 这是一个类似于 JSFiddle.net 的编辑器的版本。我不处理文本突出显示、移位或箭头键，但输入和退格键工作。 http://jsfiddle.net/gqHgb/

HTML

<div id="ref_line" style="display:none">
    <div class="line"><div class="lineno"></div><pre contenteditable="true"> </pre></div>
</div>
<div class="editor">
</div>

CSS 我使用 CSS counter() 来处理行号

.editor 
    margin-left: 2em;
    counter-reset: lnno;

.editor .line 
    poisition: relative;

.line .lineno 
    position: absolute;
    left: 0px;
    width: 2em;
    color: blue;
    text-align: right;

.line .lineno:before 
    counter-increment: lnno;
    content: counter(lnno);

.line pre 
    position: relative;
    overflow: visible;
    white-space: pre-wrap;
    word-break: normal;
    word-wrap: break-word;

JS jQuery

// setup editors
$(".editor").each(function() 
    $(this).append($("#ref_line").html());
);
// line focus / blur
$(".editor").on("focus", ".line pre", function() 
    var pre = $(this);
    if(pre.text() == " ")
        pre.text("");
);
$(".editor").on("blur", ".line pre", function() 
    var pre = $(this);
    if(pre.text() == "")
        pre.text(" ");
);
// line add / remove
$(".editor").on("keydown", ".line pre", function(event) 
    var pre = $(this);
    if(event.which == 13) 
        event.stopPropagation();
        event.preventDefault();
        pre.parent().after($("#ref_line").html());
        pre.blur();
        pre.parent().next().find("pre").focus();
     else if(event.which == 8 && pre.text() == "" && this != pre.parents(".editor").find("pre:first")[0]) 
        var back = pre.parent().prev();
        pre.parent().remove();
        back.find("pre").focus();
    
);

【讨论】：

感谢@LastCoder。但不应删除行号。我们可以使用 div 来显示数字吗？

其实第一个要好得多，只需要不删号。我之前已经实现了你的新想法，但被困在数字应该跟随其确切行的同一位置。如果我继续写，下一个数字之间会有差距。

@Janty - 我不明白你所说的“如果我继续写下一个数字之间会有差距”是什么意思。当您说您不想删除行号时，您的意思是一旦创建了新行，您就不想删除该行吗？无论如何，我希望我至少能帮助你，祝你好运。

你看过 Fiddle 的 textarea，我们在其中编写我们的 javascript、css 和 html 代码。我需要实现相同的功能。按下回车键有一个行号，自动递增，如果行太大和没有按下回车键之间会有垂直间隙（空）。

@Janty - 是的 Janty 我现在明白了。这种类型的定制需要做很多工作。您最好搜索它，例如可以完成这项工作的 jQuery 插件或其他一些预制小部件。如果您想尝试自己制作，则需要处理大量键盘输入并使用 contenteditable。