如何从输入字段中获取多个值并添加到文本区域？

Question

我想在文本框中添加单个值，单击添加后，这将显示在 TextArea 中。 当我下次执行此过程时，新值将显示在最后一个值之后。 但是下次它会覆盖我的最后一个值并显示最近的值。 如何保存我的最后一个值并在新值之前按顺序显示它们。 这是我的html代码，

    <div class="row">
<div class="col-md-6">
    <div class="input-group">
        @using (Html.BeginForm("Process", "Home", FormMethod.Post, new
        {
            enctype = "multipart/form-data"
        }))
        {
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Connect To:</span>                     
                @Html.TextBoxFor(model => model.ipAddress, new { @class = "form-control" })
            </div>    
                }
            </div>
</div>
<div class="col-md-6">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Recent Devices</h3>
        </div>
        @Html.TextArea("Recent Devices", (string)@ViewBag.recentDevices, new { style = "max-width:100%; min-height:250px", @class = "form-control" })
    </div>
</div>

在我的控制器代码中，

    Session["recentDevices"] = con.ipAddress;
    Viewbag.recentDevices = Session["recentDevices"];

Answer 1

如果您想要一个简单的 Javascript 解决方案，请使用：

document.getElementById("MyTextarea").value += "Added text";

或者，根据您的编码方式，您还可以使用：

var text = document.getElementById("YourInput").value
document.getElementById("MyTextarea").value += text;

更新：

我不确定这是否对您有帮助，但此脚本会将值放在光标所在的位置。 其他脚本将元素添加到 textarea 的末尾，因此它们应该适合您，但是如果您想要更好的脚本，请使用此脚本。

typeInTextarea(document.getElementById('MyTextarea'), "Added Text");


      function typeInTextarea(el, newText) {
    var start = el.selectionStart
    var end = el.selectionEnd
    var text = el.value
    var before = text.substring(0, start)
    var after  = text.substring(end, text.length)
    el.value = (before + newText + after)
    el.selectionStart = el.selectionEnd = start + newText.length
    el.focus()
  }

Answer 2

如果您使用 ASP.NET MVC，我的建议是：

• 创建自己的 MVC 组件
• 使用 jQuery 做你想做的事

为什么要使用 TextArea 来获取 IP 列表？ 如果你用 ListBox 替换它，你可以直接从数据库或类似的东西管理一切。

Answer 3

您可以随时推出自己的设置。 我会有一个带按钮的文本框，右边有一个列表框，其中包含用户输入的所有 IP 地址。 您甚至可以在输入的项目右侧包含一个“X”，以便用户可以删除它。 当您回传数据时，您所要做的就是对 DIV 元素执行 $.each 以获取数据并将其作为逗号分隔的字符串发布。