Question

我有一个html页面，其中我有一个文本框（键入你的文本），我需要输入这样的文字：

Name=Value

用户可以使用此文本框快速将名称值对添加到该文本框下方的列表中。假设我们在上面的文本框中输入Hello=World并单击添加，然后在下面的列表中显示为

Hello=World

如果我们再次在同一文本框中输入ABC=PQR，那么在下面的列表中，它应该显示为这样，这意味着它应该继续在其原始条目下方添加新的名称值对。

Hello=World
ABC=PQR

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

这是我jsfiddle到目前为止我尝试过的内容但是我无法添加和排序，因为我无法理解如何执行此功能？我需要简单的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>

Answer 1

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.');
}

JSFiddle

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

1 个答案: