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 構造を使用しますが、Enter キーが押されておらず、文がまだ完成していない場合に空白を入れることができませんでした。
  • ajax htmleditor エクステンダーを使用しますが、上部にある順序付きの赤いリスト アイコン ボタンを押す必要があります。

これは、私が必要としていたものと同じものを使用する JsFiddle です。

ここに画像の説明を入力

私は今立ち往生しているので、これに関する助けやガイダンスをいただければ幸いです。

前もって感謝します。

4

2 に答える 2

4

数行の JavaScript でうまくいきます。http://jsfiddle.net/mkWhy/1/ テキストエリアの 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/

私は2つのテキストエリアを使用して、最初のセットを読み取り専用にし、それらを隣り合わせにブロットさせます。次に、入力テキスト領域でキーアップとスクロール イベントを使用します。高さとスクロール位置の同期を保つため。

$(".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 のエディターに似たバージョンです。テキストの強調表示、シフト、または矢印キーは扱いませんが、Enter キーと Backspace キーは機能します。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();
    }
});
于 2013-07-22T13:36:18.590 に答える
0

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

これは役に立ちますか？

キーが押されるたびに関数を起動することです。したがって、行を改行して最後の数字に 1 を追加する関数が必要なだけです。

+=1

Javascript は私の得意な言語ではないので、できることはこれだけです。正しい方法で送信したことを願っています。

于 2013-07-22T13:12:26.427 に答える