如何在textarea中顯示輸入（名稱+值）？

我正在研究這個項目，當同一個表單中的一個輸入值發生更改時，我需要更改textarea的值。如何在textarea中顯示輸入（名稱+值）？

HTML：

<form id="form" action="" method=""> 
<textarea readonly class="overview"></textarea> 
<input type="text" class="add" name="product1" /> 
<input type="text" class="add" name="product2" /> 
<input type="text" class="add" name="product3" /> 
<input type="text" class="add" name="product4" /> 
</form>

客戶是允許改變input.class。只要其中一個輸入發生變化，textarea-value就會改變。

textarea的應該顯示類似：
3×產品1
1個產品3
4×product4的

任何人有一個想法？

由於提前，

喬爾

來源

2013-04-04 user2245052

爲「添加」類添加模糊事件，並且當觸發此事件時，您可以動態更新文本區域。在添加內容之前，請確保輸入標籤的值不爲空:) – dreamweiver 2013-04-04 13:41:54

$（'。add'）。blur（function（）{if（$（this）.text（）。length）{$（'。overview '）.val（content）}}）;內容是你的動態生成的數據，例如：3Xproduct1 ..... – dreamweiver 2013-04-04 13:43:51

@dreamweiver我認爲正確的事件將是'模糊'或'keyup' – 2013-04-04 13:44:27

$(".add").keyup(function() { 
var app="" 
$(".add").each(function() { 
     if($(this).val()) { 
    var value=$(this).val(); 
    var name=$(this).attr('name'); 
    app +=value+"*"+name+ "\n" ;  
     } 
}); 
    $(".overview").text(app);

}）;

手錶this。

希望這會給你一些解決方案。

來源

2013-04-04 13:56:44 Nirmal

<textarea readonly class="overview" id="mytxtarea"></textarea> 
    $("#product1").blur(function(){ 
    if($("#product1").val()!='') 
    { 
     $("#mytxtarea").val('test value'); 
    } 
});

來源

2013-04-04 13:42:24

$('input').keyup(function() { 
    var inputedValue = $(this).val(); 
    var name = $(this).attr('name'); 
    $(".overview").text(inputedValue+name); 
});

來源

2013-04-04 13:47:51

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Test</title> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#form .add').on('keyup', function(){ 
       console.log('test'); 
       var string1 = $('#form .product1').val() + ' x product1\n'; 
       var string2 = $('#form .product2').val() + ' x product2\n'; 
       var string3 = $('#form .product3').val() + ' x product3\n'; 
       var string4 = $('#form .product4').val() + ' x product4'; 

       $('#form textarea').val(string1 + string2 + string3 + string4); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form" action="" method=""> 
     <textarea readonly class="overview"></textarea> 
     <input type="text" class="add product1" name="product1" /> 
     <input type="text" class="add product2" name="product2" /> 
     <input type="text" class="add product3" name="product3" /> 
     <input type="text" class="add product4" name="product4" /> 
    </form> 
</body> 
</html>

來源

2013-04-04 13:53:04 manuAcl

這將你想要做什麼......

$("input.add").keyup(function() { 
    var msg = ""; 
    $("input.add").each(function() { 
     if($(this).val()) { 
      msg += $(this).val() + "x " + $(this).attr("name") + "\n"; 
     } 
    }); 
    $("textarea.overview").text(msg) 
});

我與你的HTML這裏使用這樣的： http://jsfiddle.net/XYXpp/

來源

2013-04-04 13:54:08 smerny

我翻翻了其他答案，這是目前唯一一個既能工作又能動態生成所有數據的答案 – smerny 2013-04-04 14:06:46

如何在textarea中顯示輸入（名稱+值）？

回答

相關問題