按下回车键时文本框的行数

Question

按下回车键时文本框的行数

c#jqueryhtmlajax

4

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

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

这是在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 extender，但需要按顺序在顶部点击有序列表图标按钮。

这里是JsFiddle使用相同的方法，就像我需要做的那样。

enter image description here

我非常希望能得到关于编程方面的帮助或指导，因为我现在陷入了困境。

提前感谢。

- Janty

2个回答

0

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

这个能有帮助吗？

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

+=1

JavaScript不是我的擅长语言，这就是我所能做的。我希望我能帮到你。

- Oussama el Bachiri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Louis Ricci · Accepted Answer

几行JavaScript代码就可以解决问题。只需处理文本区域的onkeyup事件，将当前文本按行分割（使用换行符'\n'进行分割），循环遍历这些行，并确保每行开头的数字正确。 http://jsfiddle.net/mkWhy/1/

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

纯JavaScript

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/

我使用两个文本区域，将第一个设置为只读，并使它们相邻。然后在输入文本区域上使用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的编辑器类似的版本。我不处理文本高亮、shift或箭头键，但回车和退格键可以使用。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中的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();
    }
});