Question

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

用户不应该自己选择或删除数字，文本字段应该从头开始配置为编号列表。

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

以下是我尝试的内容，但它无法正常工作。我从LineAreaText Demo获得了解决方案。

但需要将结构视为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扩展器，但需要在顶部按下orderred list icon按钮。

这就是JsFiddle使用我需要做的事情。

enter image description here

我非常感谢任何帮助或指导，因为我现在被困住了。

提前致谢。

Answer 1

几行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"));
});

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

我使用两个textarea将第一组设置为readonly并让它们彼此相邻。然后使用输入textarea上的keyup和scroll事件。保持高度和滚动位置同步。

$(".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;
});

编辑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();
    }
});

Answer 2

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

这会有任何帮助吗？

只要按下按键就会触发一个功能。所以你可能只需要一个打破一行的函数，并用1添加最后一个数字。

+=1

Javascript不是我最好的语言，所以这就是我所能做的。我希望我以正确的方式送你。

输入键按下文本框行号

2 个答案: