輸入鍵按下文本框行號

Question

我正在嘗試實現一個文本插入字段，該字段應自動為每一行編號 （基於行中斷）。

用戶不應該自己選擇或刪除數字，文本字段應該從頭開始配置為編號列表。

這是在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擴展器，但需要在頂部按下orderred list圖標按鈕。

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

因為我現在被困住，所以我非常感謝任何幫助或指導。

提前致謝。

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不是我最好的語言，所以這就是我所能做的。 我希望我以正確的方式送你。