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

我有，我有一個文本框（輸入文字）中，我需要這樣的輸入文本的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>

來源

2015-09-05 user1950349

你忘了張貼不會在你的問題和小提琴都工作的JavaScript。 – j08691

而你的JavaScript是...？ –

剛剛更新了破碎的東西。 – user1950349

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

來源

2015-09-05 21:51:48

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

回答

相關問題