Question

我在StackOverflow上关闭这个现有示例，它只是将文本框值添加到textarea作为带有一些附带文本的新行。

我通过onChange将其修改为工作，并且添加了多个文本框，如果存在值，则每个文本框都会添加新行;一切正常：

$(document).on('change', '#dlnum input', function (e){

    var inputEl = $(this);
    var textareaEl = $('#BoloDesc');

        //If input has any text
        if($(inputEl).val().length){

            //Appending line to textarea
            $(textareaEl).val($(textareaEl).val()+'DL NUMBER'+' '+$(inputEl).val()+"\r\n");

        return false;
    }

});

这一切都很好;我的问题是，正如在文本框中存在一个值时，文本框值被添加或附加到textarea，我希望textarea能够从textarea中删除特定的文本框值。空的。

我知道谷歌搜索这会带来设置.val =＆＃39;＆＃39;，但当然这将清除整个文本区域，这不是我想做的事情。我只想删除特定的文本框值，同时保留其他所有文本框。

我该怎么做？

原始StackOverflow帖子在这里： append textbox value to textarea on enter

Answer 1

我会声明一个名为

的全局数组

var content = [];

然后当change事件被触发时，我会将输入框的内容添加到特定索引（相同的输入总是指向同一索引），如：

$(document).on('change', '#dlnum input', function (e){
    content['dl_number'] = $(this).val();
    render();  
});

在数组中设置内容后，每个change事件都应调用render函数，该函数将组合数组的内容，并应修改textarea的内容。

function render(){
    var text = "";
    for (var x in content) {
       text += content[x] ? content[x] + "\r\n" : "";
    }
    $('#BoloDesc').val(text);
}

Answer 2

我只是检查textarea中是否存在该值，如果它存在，则通过数组splice方法将其删除。

$("#delete").on("click", function() {
  var value = $("#quickLinksTextbox input").val();  
  var textareaEl = $('#quickLinksURLs');
  var textareavalue = textareaEl.val().split("\n");
  if(textareavalue.indexOf(value) >= 0) {
     textareavalue.splice(textareavalue.indexOf(value),1);
     textareaEl.val(textareavalue.join("\n"));
  }
});

以下是完整演示：

＆＃13;

$(document).on('keypress', '#quickLinksTextbox input', function (e){
   
var inputEl = $(this);
var textareaEl = $('#quickLinksURLs');

//Enter was pressed
if(e.keyCode == 13){
     
    //If input have any text
    if($(inputEl).val().length){
        
        //Appending word (with ending new line) to textarea
        $(textareaEl).val($(textareaEl).val()+$(inputEl).val()+"\r\n");
        
        //Cleaning input
        $(inputEl).val('');
    }
        
    return false;
}
});

$("#delete").on("click", function() {
  var value = $("#quickLinksTextbox input").val(),
  textareaEl = $('#quickLinksURLs'),
  textareavalue = textareaEl.val().split("\n");
  if(textareavalue.indexOf(value) >= 0) {
      textareavalue.splice(textareavalue.indexOf(value),1);
      textareaEl.val(textareavalue.join("\n"));
      $("#quickLinksTextbox input").val('');
  }
});

＆＃13;

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="quickLinksTextbox">
 <input>
</div>
<textarea id="quickLinksURLs" rows="5"></textarea>

<button id="delete">Delete</button>

＆＃13;

从Textarea添加/删除文本框值

2 个答案: