Build, Modify, Output Javascript Array

Я пытаюсь выполнить следующее ... если он задает слишком много вопросов в одном вопросе, тогда некоторые простые шаги в отношении того, какие события будут использоваться, по-прежнему будут помогать.Build, Modify, Output Javascript Array

Есть 2 пустых текстовых поля, сидящих рядом друг с другом - вход и выход. Между ними находятся два входа до и после. Я хочу, чтобы напечатать или вставить список слов в Input, разделенных линией разрыва, например:

melons 
peaches 
apples

И затем использовать до и после входа добавить в слово/фраза/символ до и после каждого ключевого слова. Так что, если я типа «купить» в до и «сегодня» после, текстовая область Output будет отображаться:

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()); 
     }); 
    });

Любое руководство было бы потрясающе!

источник

2013-06-17 Paul

Вы что-то пробовали? Как правило, при переполнении стека вы должны попытаться выполнить свою задачу, прежде чем задавать вопрос, размещая соответствующий код, когда вы застреваете. Я бы начал с рассмотрения методов String и Array ['split()'] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) и [' присоединиться() '] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join). –

Да, я начал просто пытаться получить текст из Input для отображения в Output, но не мог даже заставить его работать. Я только что обновил свой оригинальный пост с помощью этого кода. – Paul

компактный один:

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

example

источник

2013-06-17 01:21:48 leonhart

Компактность хорошая. Спасибо! – Paul

Это будет делать трюк:

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-17 01:01:05

Хорошо, я могу помочь вам приступить к работе. Мой ответ не завершен, но у вас может быть очень хорошая идея. Примечание. Я написал этот код, чтобы его было легко понять, и я не использую сложные подходы специально.

<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-17 01:27:34 Rafa

Build, Modify, Output Javascript Array

ответ

Смежные вопросы