Javascript 如何从文本框在文本区域中添加值？_Javascript_Css_Html

Javascript 如何从文本框在文本区域中添加值？

javascript css html

Javascript 如何从文本框在文本区域中添加值？,javascript,css,html,Javascript,Css,Html,我有一个html页面，其中有一个文本框（键入您的文本），我需要在其中键入如下文本： Name=Value 用户将使用此文本框将名称-值对快速添加到该文本框正下方的列表中。假设我们在上面的文本框中键入Hello=World，然后单击add，那么在下面的列表中，它应该显示为 Hello=World 如果我们在同一个文本框中再次键入ABC=PQR，那么在下面的列表中，它应该显示为这样，这意味着它应该继续在其原始条目下方添加新的名称-值对 Hello=World ABC=PQR 但是如果语法不正确

我有一个html页面，其中有一个文本框（键入您的文本），我需要在其中键入如下文本：

Name=Value

用户将使用此文本框将名称-值对快速添加到该文本框正下方的列表中。假设我们在上面的文本框中键入

Hello=World

，然后单击add，那么在下面的列表中，它应该显示为

Hello=World

如果我们在同一个文本框中再次键入

ABC=PQR

，那么在下面的列表中，它应该显示为这样，这意味着它应该继续在其原始条目下方添加新的名称-值对

Hello=World
ABC=PQR

但是如果语法不正确，比如它不在Name=Value对中，那么它不应该向列表中添加任何内容，而是显示一个输入格式错误的弹出窗口。名称和值只能包含字母数字字符

这是我迄今为止尝试过的功能，但我无法添加和排序，因为我无法理解如何实现此功能？我需要简单的HTML和Javascript，我不想使用任何库，因为我想保持它的简单

下面是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        #my-text-box {
            font-size: 18px;
            height: 1.5em;
            width: 585px;
        }
        textarea{
            width:585px;
            height:300px;
        }
        .form-section{
            overflow:hidden;
            width:700px;
        }
        .fleft{float:left}
        .fright{float:left; padding-left:15px;}
        .fright button{display:block; margin-bottom:10px;}
    </style>

    <script language="javascript" type="text/javascript">
    function addtext() {
        var newtext = document.form-section.my-text-box.value;
        document.form-section.outputtext.value += newtext;
    }
    </script>       
</head>

<body>
    <h3>Test</h3>

    <label for="pair">Type your text</label></br>
    <div class="form-section">
        <div class="fleft">
            <input type='text' id='my-text-box' name='my-text-box' value="Name=Value" />
        </div>
        <div class="fright">
            <button type="button" onClick="addtext();">Add</button>
        </div>
    </div>

    </br>
    </br>
    </br>

    <label for="pairs">Name/Value Pair List</label></br>
    <div class="form-section">
        <div class="fleft">
            <textarea name='outputtext'>After clicking add button, it should show Name Value pair here</textarea>
        </div>
        <div class="fright">
            <button type="button">Sort by name</button>
            <button type="button">Sort by value</button>
        </div>
    </div>

</body>
</html>


试验
#我的文本框{
字号：18px；
高度：1.5em；
宽度：585px；
}
文本区{
宽度：585px；
高度：300px；
}
.表格组{
溢出：隐藏；
宽度：700px；
}
.fleft{float:left}
.fright{float:左；padding left:15px；}
.fright按钮{显示：块；页边距底部：10px；}
函数addtext（）{
var newtext=document.form-section.my-text-box.value；
document.form-section.outputtext.value+=newtext；
}
试验
键入文本

添加






名称/值对列表

单击“添加”按钮后，应在此处显示名称-值对
按名称排序
按值排序

你忘了发布在你的问题和小提琴中都不起作用的JavaScript。而你的JavaScript是…？只是更新了一些坏东西。

document.getElementById('add').onclick = addtext;

function addtext() {
    var nameValue = document.getElementById('my-text-box').value;
    if (/^([a-zA-Z0-9]+=[a-zA-Z0-9]+)$/.test(nameValue))
        document.getElementById('output').textContent += nameValue + '\n';
    else
        alert('Bad value.');
}