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

Question

我有一個html頁面，其中有一個文本框（輸入您的文本），我需要在其中輸入以下文本：

Name=Value

用戶將使用此文本框將“名稱值”對快速添加到該文本框正下方的列表中。 假設我們在上面的文本框中輸入Hello=World並單擊添加，那么在下面的列表中，它應顯示為

Hello=World

而且，如果我們再次在同一文本框中鍵入ABC=PQR ，則在下面的列表中，它應該像這樣顯示，這意味着它應該繼續在其原始條目下方添加新的“名稱/值”對。

Hello=World
ABC=PQR

但是，如果語法不正確（例如不在“名稱=值”對中），則不應將任何內容添加到列表中，而應彈出該錯誤的輸入格式。 名稱和值只能包含字母數字字符。

這是到目前為止我嘗試過的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 個解決方案

解決方案1
1 已采納 2015-09-05 21:51:48

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

問題描述

1 個解決方案

解決方案1 1 已采納 2015-09-05 21:51:48

解決方案1
1 已采納 2015-09-05 21:51:48