在fieldset
中,我有5个静态textarea
以及另外2个input
,下面的按钮通过JavaScript生成一行,一行。 texareas和输入嵌入在一个表单中,并将由另一个按钮提交,该按钮不在屏幕截图中。 HTML代码如下所示:
<form id="invoice" method="post" action="index.php" >
<fieldset><legend>Service</legend>
<label id="item_header">Item</label>
<label id="price_header">Price</label>
<label>1</label>
<textarea form="invoice" rows="1" name="item[]" /></textarea>
<input type="text" name="fee_1[]" value="" />
<input type="text" name="fee_2[]" value="" />
<br>
<label>2</label>
<textarea form="invoice" rows="1" name="item[]" /></textarea>
<input type="text" name="fee_1[]" value=""/>
<input type="text" name="fee_2[]" value=""/>
<br>
<label>3</label>
.......
</fieldset>
<input class="button" type="button" value="add line" onclick="addLine()">
.......
<input type="submit" value="next page" />
</form>
最后它看起来像这个截图1。
添加一些行后,它看起来像这个截图2。
当我点击提交按钮(您在此处未看到)时,内容通过post
方法传输到服务器。到目前为止它完美无缺。
有时我需要回到上一个网站并添加更多项目或更正一些单词。为此,我使用back
链接,看起来像这样
<a onclick="history.go(-1)" >Back</a>
现在这是一个我有问题的问题。
当我有5个textareas和输入的集合,然后我回去看到所有5 textareas和输入以及所有内容。所以说它完全恢复了。
但是,当我有一个更加动态生成的textareas和输入时,当我回到历史时,它们就会丢失。但是当我使用Chrome,FireFox或Edge(所有新版本)时,这是only true
。当我在Mac上使用Safari时,我get the complete range
恢复了包含。它的内容。
用于生成动态textareas和输入的JavaScript代码如下所示
function addLine() {
var button = document.getElementById('addline_button');
var list = document.getElementById('items');
var i = list.getElementsByTagName("label").length-1;
var n = document.createElement('label');
n.className='item_label';
n.innerHTML = i++ ;
list.appendChild(n);
n = document.createElement('textarea');
n.formname='invoice';
n.name='item[]';
n.rows=1;
list.appendChild(n);
n = document.createElement('input');
n.type='text';
n.name="fee_1[]";
list.appendChild(n);
n = document.createElement('input');
n.type='text';
n.name="fee_2[]";
list.appendChild(n);
}
我是否遗漏了Javascript中Chrome,Firefox和Edge丢失其他textareas和输入的内容? 如果是这样,为什么Safari会显示所有内容?