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

我有，我有一个文本框（输入文字）中，我需要这样的输入文本的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

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

回答

相关问题