Question

我正在尝试制作一些实时编辑选项，我会尝试向您展示我想要的内容。

例如，我有4个文本输入字段和一个textarea。

<input type="text" name="fname">

<input type="text" name="lname">

<input type="text" name="fname">

<input type="text" name="company">

<textarea></textarea>

我希望这些文本输入字段数据显示为textarea生动。并且还在两个输入之间进行线制动。

Answer 1

真的很快又脏：

$("input[type='text'], textarea").keyup(function() {
    $("textarea").val('')
    var tev = '';
    $("input[type='text']").each(function() {
        tev += $(this).val() + '\n';
    });
    $("textarea").val(tev);
});

Answer 2

像这样：

HTML：

<input type="text" name="fname" id="i1">

<input type="text" name="lname" id="i2">

<input type="text" name="fname" id="i3">

<input type="text" name="company" id="i4">

<textarea id="i5"></textarea>

JS：

$( function() {
    function updateTextarea() {
        $( '#i5' ).val( $( '#i1' ).val() + '\n\n' + $( '#i2' ).val() + '\n\n' + $( '#i3' ).val() + '\n\n' + $( '#i4' ).val() );
    }
    $( '#i1, #i2, #i3, #i4' ).keyup( updateTextarea );
});

jsFiddle demo

Answer 3

或者在香草JS中：

(function(){
    var fname = document.getElementsByName("fname")[0];
        fname.onkeyup=setTextareaValue;
    var lname = document.getElementsByName("lname")[0];
        lname.onkeyup=setTextareaValue;
    var fnamex = document.getElementsByName("fnamex")[0]; //you had two elements named fname
        fnamex.onkeyup=setTextareaValue;
    var company = document.getElementsByName("company")[0];
        company.onkeyup=setTextareaValue;
    var textarea = document.getElementsByName("textarea")[0];

    function setTextareaValue(){
        textarea.value = ""+fname.value+"\n"+lname.value+"\n"+fnamex.value+"\n"+company.value;
    }

})();

http://jsfiddle.net/LFfEf/

Answer 4

您可以构建一个可重用的jQuery函数，只要您在字段集中对输入进行分组，就可以执行此操作：

HTML：

<fieldset data-concat-into="concatinated">
    <input type="text" name="fname" />
    <input type="text" name="lname" />
    <input type="text" name="fname" />
    <input type="text" name="company" />
</fieldset>
<textarea id="concatinated" name="textarea" readonly="readonly" rows="10"></textarea>

jQuery的：

$("fieldset[data-concat-into] input").on("keyup", function(){
    var fieldset = $(this).parent();
    var target = fieldset.data("concat-into");
    var vals = "";
    fieldset.children("input").each(function(){
        vals += ((vals)?"\n":"")+ $(this).val();
    });
    $("#"+target).val(vals);
});

强制性的JSFiddle：

http://jsfiddle.net/JpagC/

多个文本输入字段文本进入<textarea> </textarea>

4 个答案: