如何在文本框中添加文本区域的值？ [英] How to add value in a text area from a textbox?
问题描述
<$ 我有一个HTML页面，里面有一个文本框（键入您的文本），其中需要输入文本。 c $ c>名称=值
用户可以使用此文本框快速添加名称值对到该文本框下面的列表。假设我们在上面的文本框中键入 Hello = World 并点击添加，那么在下面的列表中它应该显示为
您好=全球
如果我们再次输入 ABC = PQR 在同一个文本框中，那么在下面的列表中，它应该显示像这样，这意味着它应该不断添加新的名称值对，在其原始条目下面。 / p>
您好=全球
ABC = PQR
但是如果语法不正确，就像它不在Name = Value对中那么它不应该向列表添加任何内容，而是显示弹出错误的输入格式。名称和值只能包含字母数字字符。
这是我的 jsfiddle 到目前为止我尝试过的，但是我无法添加和排序，因为我无法理解如何执行此功能？我需要纯HTML和Javascript，我不想使用任何库，因为我想保持简单。
以下是我的代码：
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title>测试< /标题>
< style type =text / css>
＃my-text-box {
font-size：18px;
身高：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 =javascripttype =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>输入您的文字< / 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 =buttononClick =addtext（）;>添加< / button>
< / div>
< / div>
< / br>
< / br>
< / br>
< label for =pairs>名称/值对列表< / label>< / br>
< div class =form-section>
< div class =fleft>
< textarea name ='outputtext'>点击添加按钮后，它应该在这里显示名称值对< / textarea>
< / div>
< div class =fright>
< button type =button>按名称排序< / button>
< button type =button>按值排序< / button>
< / div>
< / div>
< / body>
< / html>
文件。 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 +'\\\
';
else
alert（'Bad value。'）;
}
I have an html page in which I have a textbox (Type your text) in which I need to type in text like this:
Name=Value
This textbox will be used by the user to quickly add Name Value pairs to the list which is just below that textbox. let's say if we type Hello=World in the above textbox and click add, then in the below list, it should show as
Hello=World
And if we again type ABC=PQR in the same textbox, then in the below list, it should show like this so that means it should keep adding new Name Value pair just below its original entry.
Hello=World
ABC=PQR
But if the syntax is incorrect like if it is not in Name=Value pair then it should not add anything to the list and instead show a pop up that wrong input format. Names and Values can contain only alpha-numeric characters.
Here is my jsfiddle what I have tried so far but I am not able to add and sort so far as I am not able to understand how to do this feature? I need to plain HTML and Javascript, I don't want to use any library yet as I want to keep it simple.
Below is my code:
<!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>
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.');
}
这篇关于如何在文本框中添加文本区域的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
