Javascript 如何在html/css中自动通过一页模板？
我在网页上有一个表单字段，用户在其中输入某些信息。同时，此信息用于填写其下方的文档。我已经附加了用于创建文档模板的css。目前，如果用户输入大量信息，它将覆盖一个a4页面，但我不知道如何在网页上显示，因为我不知道如何使输出自动继续到第二页。我正在使用js将用户输入表单中的文本推送到a4页面的文本字段中 任何帮助都将不胜感激Javascript 如何在html/css中自动通过一页模板？,javascript,html,css,Javascript,Html,Css,我在网页上有一个表单字段，用户在其中输入某些信息。同时，此信息用于填写其下方的文档。我已经附加了用于创建文档模板的css。目前，如果用户输入大量信息，它将覆盖一个a4页面，但我不知道如何在网页上显示，因为我不知道如何使输出自动继续到第二页。我正在使用js将用户输入表单中的文本推送到a4页面的文本字段中 任何帮助都将不胜感激 <html> <head> <meta charset="utf-8"> <title>
<html>
<head>
<meta charset="utf-8">
<title>Company Details</title>
</head>
<style>fieldset {
width: 600px;
}
label.field {
text-align: right;
width:200px;
float: left;
font-weight: bold;
color: black;
}
input.textbox-300 {
width: 300px;
float: left;
}
fieldset p {
clear: both;
padding: 5px;
}
body {
background: rgb(204,204,204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
padding: 1;
}
page p {
margin-left: 80;
margin-right: 80;
}
page h1 {
margin-left: 80;
margin-right:80;
margin-top:100;
margin-bottom:50;
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
@media print {
body, page {
margin: 0;
box-shadow: 0;
}
}
</style>
<body>
<form action="begin-create-done.html" method="get">
<fieldset>
<p><label class="field"> Lots of text</label>:
<span><input type="text" name="text1"></span> <br>
</fieldset>
</form>
<page size="A4">
<h1>
<span class="text1"></span>
</h1>
</page>
<script>
var formValues = {};
function inputObj(formNR, defaultValues) {
var inputs = formNR.getElementsByTagName('input');
for ( var i = 0; i < inputs.length; i++) {
formValues[inputs[i].name] = defaultValues[i];
if(inputs[i].type === 'text') {
inputs[i].value = defaultValues[i];
outputs = document.getElementsByClassName(inputs[i].name);
for ( var j = 0; j < outputs.length; j++) {
outputs[j].innerHTML = defaultValues[i];
}
}
inputs[i].addEventListener('keyup', function() {
formValues[this.name] = this.value;
outputs = document.getElementsByClassName(this.name);
for ( var j = 0; j < outputs.length; j++) {
outputs[j].innerHTML = this.value;
}
}, false);
}
}
// build a little array with the defaultValues for each input
var defValues =[];
// this will push all inputs from the given form in the formValues object.
inputObj(document.forms[0], defValues);
</script>
</body>
</html>
公司详情
字段集{
宽度：600px；
}
标签字段{
文本对齐：右对齐；
宽度：200px；
浮动：左；
字体大小：粗体；
颜色：黑色；
}
input.textbox-300{
宽度：300px；
浮动：左；
}
字段集p{
明确：两者皆有；
填充物：5px；
}
身体{
背景：rgb（204204）；
}
页面{
背景：白色；
显示：块；
保证金：0自动；
边缘底部：0.5cm；
填充：1；
}
第p页{
左边距：80；
右边距：80；
}
第h1页{
左边距：80；
右边距：80；
利润率最高：100；
边际下限：50；
}
第[size=“A4”]页{
宽度：21cm；
身高：29.7厘米；
}
页面[size=“A4”][layout=“纵向”]{
宽度：29.7cm；
身高：21厘米；
}
@媒体印刷品{
正文，第页{
保证金：0；
盒影：0；
}
}
大量文本：
var formValues={}；
函数inputObj（formNR，defaultValues）{
var inputs=formNR.getElementsByTagName（'input'）；
对于（变量i=0；i