追加数据到文本区域

Question

我有几个复选框，当点击输出到textarea。这个位正在工作，但是在每个结果被列出之后，都有一个我不知道如何删除的逗号。此外，我想用一些文本预先加载textarea，并在下面列出结果而不覆盖预先加载的文本。到目前为止，我有这个

function updateTextArea() { 
 
    var allVals = []; 
 
    $('.taglist :checked').each(function(i) { 
 

 
    allVals.push((i != 0 ? "\r\n" : "") + $(this).val()); 
 
    }); 
 
    $('#form1').val(allVals).attr('rows', allVals.length); 
 

 
} 
 
$(function() { 
 
    $('.taglist input').click(updateTextArea); 
 
    updateTextArea(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="textfield" id="form1" name="form1">My text here</textarea> 
 
<div class="taglist"> 
 
    <label><input type="checkbox" value="Value 1">Value 1</label> 
 
    <label><input type="checkbox" value="Value 2">Value 2</label> 
 
    <label><input type="checkbox" value="Value 3">Value 3</label> 
 
    <label><input type="checkbox" value="Value 4">Value 4</label> 
 
    <label><input type="checkbox" value="Value 5">Value 5</label> 
 
</div>

Answer 1

如果将数组设置为参数val()，则会将其隐式转换为逗号分隔的字符串。您可以使用allVals.join()加入数组，或者，如果根本不需要数组形式的值，则可以将它们直接连接为字符串。

我还实现了您的请求，以便能够在以下片段中保留初始值，方法是使用data()进行保存。 （您可能会想跳过检查省略第一行中断--edit：我实现了一个动态的检查，以查看初始textarea的值是否为空）

function updateTextArea() { 
 
    var allVals = $('#form1').data('initialVal'), 
 
     lineCount = 1; 
 
    $('.taglist :checked').each(function(i) { 
 
    allVals+= (i != 0 || allVals.length > 0 ? "\r\n" : "") + $(this).val(); 
 
    lineCount++; 
 
    }); 
 
    $('#form1').val(allVals).attr('rows', lineCount); 
 

 
} 
 
$(function() { 
 
    $('.taglist input').click(updateTextArea); 
 
    
 
    $('#form1').data('initialVal', $('#form1').val()); 
 
    updateTextArea(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="textfield" id="form1" name="form1">My text here</textarea> 
 
<div class="taglist"> 
 
    <label><input type="checkbox" value="Value 1">Value 1</label> 
 
    <label><input type="checkbox" value="Value 2">Value 2</label> 
 
    <label><input type="checkbox" value="Value 3">Value 3</label> 
 
    <label><input type="checkbox" value="Value 4">Value 4</label> 
 
    <label><input type="checkbox" value="Value 5">Value 5</label> 
 
</div>

Answer 2

为什么你有逗号？

因为你隐含呼叫的toString()阵列上，这将返回以逗号分隔的数组项。通过空字符串''加入你的数组的项目，你会得到正常的文本。

为什么你没有得到的文字？

您已设置的文本出现，但在jQuery的initializer函数调用updateTextArea()最后一行，所以它会设置你的textarea的text与allVals，里面是空的，第一时间，当你不选择任何值。

它在arr上隐含调用toString并获取数组的字符串表示形式。

var arr = ['1', '2', '3'] ; 
 

 
console.log(arr);

工作实例

function updateTextArea() { 
 
    var allVals = ['My text here']; 
 
    $('.taglist :checked').each(function(i) { 
 
    allVals.push((i != 0 ? "\r\n" : "") + $(this).val()); 
 
    }); 
 
    $('#form1').val(allVals.join('')).attr('rows', allVals.length); 
 

 
} 
 
$(function() { 
 
    $('.taglist input').click(updateTextArea); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="textfield" id="form1" name="form1">My text here</textarea> 
 
<div class="taglist"> 
 
    <label><input type="checkbox" value="Value 1">Value 1</label> 
 
    <label><input type="checkbox" value="Value 2">Value 2</label> 
 
    <label><input type="checkbox" value="Value 3">Value 3</label> 
 
    <label><input type="checkbox" value="Value 4">Value 4</label> 
 
    <label><input type="checkbox" value="Value 5">Value 5</label> 
 
</div>

Answer 3

后每个结果被列有一个逗号，我不知道该怎么以 删除

我想预装一些文字textarea的，并有它下面列出的结果 没有覆盖我的预载的文本

你可以摆脱使用array.join('')逗号。 在问候不是覆盖现有的文本，你可以存储现有文本和写数组文本区域

// if you want just the original text and no new line after it do: 
 
var originalText = $('#form1').val(); 
 

 
// if you want a new line after the original text do: 
 
originalText = $('#form1').val() + '\r\n'; 
 

 
function updateTextArea() { 
 
    var allVals = []; 
 
    allVals.push(originalText); 
 
    
 
    $('.taglist :checked').each(function(i) { 
 
    allVals.push((i != 0 ? "\r\n" : "") + $(this).val()); 
 
    }); 
 
    
 
    $('#form1').val(allVals.join('')).attr('rows', allVals.length); 
 

 
} 
 

 
$(function() { 
 
    $('.taglist input').click(updateTextArea); 
 
    updateTextArea(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="textfield" id="form1" name="form1">My text here</textarea> 
 
<div class="taglist"> 
 
    <label><input type="checkbox" value="Value 1">Value 1</label> 
 
    <label><input type="checkbox" value="Value 2">Value 2</label> 
 
    <label><input type="checkbox" value="Value 3">Value 3</label> 
 
    <label><input type="checkbox" value="Value 4">Value 4</label> 
 
    <label><input type="checkbox" value="Value 5">Value 5</label> 
 
</div>

Answer 4

喜欢这个会工作的时候重新使用它，看看加入

 function updateTextArea() {  
 
      var allVals = []; 
 
      $('.taglist :checked').each(function(i) { 
 
        
 
       allVals.push((i!=0?"\r\n":"")+ $(this).val()); 
 
      }); 
 
      $('#form1').val(allVals.join(" ")).attr('rows',allVals.length) ; 
 
      
 
      } 
 
      $(function() { 
 
       $('.taglist input').click(updateTextArea); 
 
       updateTextArea(); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="textfield" id="form1" name="form1">My text here</textarea> 
 
     <div class="taglist"> 
 
     <label><input type="checkbox" value="Value 1">Value 1</label> 
 
     <label><input type="checkbox" value="Value 2">Value 2</label> 
 
     <label><input type="checkbox" value="Value 3">Value 3</label> 
 
     <label><input type="checkbox" value="Value 4">Value 4</label> 
 
     <label><input type="checkbox" value="Value 5">Value 5</label> 
 
     </div>

Answer 5

你可以尝试：

http://codepen.io/joaocarvalhowd-1472219370/pen/egoBKQ?editors=1111]

var text_initial = document.querySelector('#form1').value + "\r\n"; 

function checkboxsListen() { 
    var checks = document.querySelectorAll('.taglist input[type="checkbox"]'); 

    Array.prototype.forEach.call(checks, function(check) { 

    check.addEventListener('change', function() { 
     updateTextArea(); 
    }) 

    }) 
} 

checkboxsListen(); 

function updateTextArea() { 
    var textarea = document.querySelector('#form1') 
    textarea.value = text_initial; 
    var checks_selected = document.querySelectorAll('.taglist input[type="checkbox"]:checked'); 

    Array.prototype.forEach.call(checks_selected, function(check) { 
    textarea.value += check.value + "\r\n"; 
    }) 
}