如何复制文本区域的内容并使用html和javascript将它们发布到另一个div中 [英] How do I copy the contents of the text area and post them into another div using html and javascript
本文介绍了如何复制文本区域的内容并使用html和javascript将它们发布到另一个div中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我编写了以下代码，用于从textarea获取用户输入的数据，并在点击确定按钮后显示div（odiv3）上的数据;
如何在div上显示这些数据？
< html xmlns = http://www.w3.org/1999/xhtml >
< head >
< meta http-equiv = 内容类型 content = text / HTML; charset = utf-8 / > ;
< title > 三个Div标签< / title >
< script type < span class =code-keyword> = text / javascript language = javascript >
< script < span class =code-attribute> type = text / javascript 语言 = < span class =code-keyword> javascript >
函数showDiv1（）
{
document.getElementById（'Div1'）。innerHTML = document.getElementById（'TextArea1'）。值;
返回false;
}
< / script >
< 输入 type = submit id = btn value = ok onclick = return showDiv1（）; / >
< style type = text / css >
＃odiv1 {
margin：3px;
background-color：＃333333;
身高：400px;
宽度：460px;
}
＃odiv2 {
background-color：＃0066FF;
margin-left：8px;
margin-top：15px;
身高：200px;
宽度：200px;
float：left;
}
＃odiv3 {溢出：自动;
margin-top：12px;
float：right;
background-color：＃00FF66;
身高：340px;
宽度：200px;
}
< / style >
< / head >
< 正文 >
< 表格 名称 = 表单 >
< div id = odiv1 > < p align = left > odiv1 < / p >
< div id = odiv2 > div2 < br >
< textarea < span class =code-attribute> id = text name = text cols = 20 行 = 5 > < / textarea >
< / br > < / div >
< div id = odiv3 > odiv3 < br >
< / br > < / div >
< / div >
< / form >
< / body >
< / html >
我想用html和javascript而不是jquery来做这个...
提前致谢，
Sandra
解决方案
试试这个：
< ！DOCTYPE html >
< head >
< title > 三个Div标签< / title >
< script >
function showDiv1（）
{
odiv2Value = document.getElementById（'text'）。value;
//用HTML替换JavaScript换行符< br >
odiv2Value = odiv2Value.replace（/（？：\\\\ n | \ r | \ n）/ g，'< br > '）;
document.getElementById（'odiv3'）。innerHTML = odiv2Value;
返回false;
}
< / script >
< / head >
< body >
< 表格 名称 = 表格 >
< div id = odiv1 > < p align = left > odiv1 < / p >
< div id = odiv2 > div2 < br >
< textarea id = text name = text cols = 20 rows = 5 > < / textarea >
< / br > < / div >
< divid = odiv3 > odiv3 < br >
< / br > < / div >
< / div >
< 输入 type = 提交 id = btn value = ok onclick = return showDiv1（）; >
< / form >
< / body >
< < span class =code-leadattribute> / html >
如何关于如jQuery使用这样一个方便而强大的库：
http://en.wikipedia.org/wiki / JQuery [ ^ ]，
http://jquery.com/ [ ^ ]？
这就是你需要的：
http://api.jquery.com/category/selectors/ [ ^ ]，
http://api.jquery.com/html [ ^ ]，
http://api.jquery.com/category/manipulation / dom-insertion-inside / [ ^ ]。
如果你需要学习jQuery（强烈推荐），请参阅：
http://learn.jquery.com [ ^ ]，
http://learn.jquery.com/using-jquery-core [ ^ ]，
http://learn.jquery.com/about-jquery/how-jquery-works [ ^ ]（从这里开始）。
-SA
I have written following code to get the data from textarea those input by user and show that data on the div(odiv3) after clicking on "ok" button;
How i can show this data on div ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Div Tags</title>
<script type ="text/javascript" language ="javascript" >
<script type ="text/javascript" language ="javascript" >
function showDiv1()
{
document.getElementById('Div1').innerHTML=document.getElementById('TextArea1').value;
return false;
}
</script>
<input type="submit" id="btn" value="ok" onclick="return showDiv1();" />
<style type="text/css">
#odiv1{
margin:3px;
background-color:#333333;
height:400px;
width:460px;
}
#odiv2{
background-color:#0066FF;
margin-left:8px;
margin-top:15px;
height:200px;
width:200px;
float:left;
}
#odiv3{ overflow:Auto;
margin-top:12px;
float:right;
background-color: #00FF66;
height:340px;
width:200px;
}
</style>
</head>
<body>
<form name="form">
<div id="odiv1"><p align="left">odiv1</p>
<div id="odiv2">div2<br>
<textarea id="text" name="text" cols="20" rows="5"></textarea>
</br></div>
<div id="odiv3">odiv3<br>
</br></div>
</div>
</form>
</body>
</html>
I want to do this using html and javascript not in jquery...
Thanks in advance,
Sandra
解决方案
Try this:
<!DOCTYPE html> <head> <title>Three Div Tags</title> <script> function showDiv1() { odiv2Value = document.getElementById('text').value; // replace JavaScript line break with HTML <br> odiv2Value = odiv2Value.replace(/(?:\r\n|\r|\n)/g, '<br>'); document.getElementById('odiv3').innerHTML=odiv2Value ; return false; } </script> </head> <body> <form name="form"> <div id="odiv1"><p align="left">odiv1</p> <div id="odiv2">div2<br> <textarea id="text" name="text" cols="20" rows="5"></textarea> </br></div> <div id="odiv3">odiv3<br> </br></div> </div> <input type="submit" id="btn" value="ok" onclick="return showDiv1();"> </form> </body> </html>
How about using such a convenient and robust library as jQuery:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^]?
This is what you would need:
http://api.jquery.com/category/selectors/[^],
http://api.jquery.com/html[^],
http://api.jquery.com/category/manipulation/dom-insertion-inside/[^].
If you need to learn jQuery (highly recommended), please see:
http://learn.jquery.com[^],
http://learn.jquery.com/using-jquery-core[^],
http://learn.jquery.com/about-jquery/how-jquery-works[^] (start from here).
—SA
这篇关于如何复制文本区域的内容并使用html和javascript将它们发布到另一个div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
