1

私は次のことを達成しようとしています...単一の質問であまりにも多くを求めている場合は、使用するイベントに関するいくつかの簡単な手順が引き続き役立ちます。

入力と出力の 2 つの空白のテキストエリアが隣り合って配置されています。それらの間には、Before と After の 2 つの入力があります。改行で区切られた入力に単語のリストを入力するか、貼り付けたいと思います。次に例を示します。

melons
peaches
apples

次に、Before および After 入力を使用して、各キーワードの前後に単語/フレーズ/記号を追加します。そのため、前に「購入」、後に「今日」と入力すると、出力テキスト エリアに次のように表示されます。

buy melons today
buy peaches today
buy apples today

ページを更新せずにこれを達成したいと思います。フォーム要素は次のように名前が付けられていると想定できます。

<textarea id="input"></textarea>
<input type="text" id="before" />
<input type="text" id="after" />
<textarea id="output"></textarea>

このコードを使用して、少なくとも入力テキストを出力に表示しようとしましたが、うまくいきません:

    $(document).ready(function(){
        $('#input').keyup(function(e){
            $('#output').html($(this).val());
        });
    });

どんなガイダンスも素晴らしいでしょう！

4

3 に答える 3

1

コンパクトなもの：

$("#input,#before,#after").on("keyup", function () {
    $("#output").val(
    $.map($("#input").val().split("\n"), function (n, i) {
        return $("#before").val() + " "+ n + " " + $("#after").val();
    }).join("\n"));
});

例

于 2013-06-17T01:21:48.900 に答える
0

わかりました。始めるのをお手伝いします。私の答えは完全ではありませんが、ここから非常に良いアイデアを得ることができます. このコードは理解しやすいように書いたものであり、意図的に洗練されたアプローチを使用していないことに注意してください。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
    $("#input").keypress(function(key){
        if(key.which == 13) {
            refreshData();
        }
    });
});

function refreshData() {
    var beforeVal = $("#before").val();
    var inputLines = $("#input").val().split(/\r\n|\r|\n/g);
    var desiredOutputVal = "";
    for(var i=0; i<inputLines.length; i++) {
        desiredOutputVal += beforeVal + inputLines[i] + "\n";
    }
    $("#output").val(desiredOutputVal); 
}

</script>
</head>
<body>
<form>
    <textarea id="input"></textarea>
    <input type="text" id="before" />
    <input type="text" id="after" />
    <textarea id="output"></textarea>
</form>
</body></html>
于 2013-06-17T01:27:34.267 に答える