1

我正在尝试完成以下任务……如果在一个问题中提出的要求太多，那么一些关于使用哪些事件的简单步骤仍然会有所帮助。

有 2 个空白文本区域彼此相邻 - 输入和输出。在它们之间是两个输入之前和之后。我想在 Input 中键入或粘贴一个单词列表，用换行符分隔，例如：

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

这可以解决问题：

function update_output(){
    //Split input by newline
    var input_words = $('#input').val().split('\n');
    var output_lines = new Array();
    //Iterate over each keyword and prepend and append values
    $.each(input_words, function(i, word){
        output_lines.push($('#before').val()+' '+word+' '+$('#after').val());
    });
    //Display output in textarea
    $('#output').val(output_lines.join('\n'));
}

您只需要选择何时要更新输出文本区域，也许绑定它以便每次 #input 或 #before 和 #after 更改时更新：

$('#input,#before,#after').on('change',update_output);
于 2013-06-17T01:01:05.503 回答
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 回答