javascript - 重置日期输入类型,输入显示在禁用的文本区域上并附加在之后
问题描述
我有一个表单,一侧带有输入字段,另一侧带有禁用的输入字段,显示来自其相应输入字段的值。我还可以选择使用一个按钮克隆这些表格,该按钮可以同时克隆两侧,其中之一是教育,因此可以进行多种教育等。
除了日期输入和输出字段外,一切正常,如果我使用.reset()
或document.getElementById("myid").value = "";
在它们上输出停止工作,它只是保持空白。即使我不重置它们,克隆后日期选择器也会停止工作。
这是我的这部分表单的 javascript 代码
/* Print funksjon for år fra */
function velgDatoUtdanning() {
var årUtdanning = document.getElementById("input-år").value;
document.getElementById("output-år").innerHTML = årUtdanning;
}
/* Print funksjon for år til */
function velgDatoUtdanningTil() {
var årUtdanningTil = document.getElementById("input-årtil").value;
document.getElementById("output-årtil").innerHTML = årUtdanningTil;
}
/* Print funksjon for skole */
var inputBox = document.getElementById("input-skole");
inputBox.onkeyup = function () {
document.getElementById("output-skole").innerHTML = inputBox.value * 2;
var val = document.getElementById("input-skole").value;
document.getElementById("output-skole").value = val;
};
/* Print funksjon for fag */
var inputBox = document.getElementById("input-fag");
inputBox.onkeyup = function () {
document.getElementById("output-fag").innerHTML = inputBox.value * 2;
var val = document.getElementById("input-fag").value;
document.getElementById("output-fag").value = val;
};
/* Legg til ny utdanning append method */
function appendUtdanning() {
if (document.getElementById("input-skole").value == "") {
return false;
} else if (document.getElementById("input-fag").value == "") {
return false;
} else {
let formUtdanning = document.querySelector("#reset-utdanning");
let clonedFormUtdanning = formUtdanning.cloneNode(true);
clonedFormUtdanning.id = "formUtdanning-kopi";
var utdanningNy = document.body.appendChild(clonedFormUtdanning);
document.getElementById("motta-utdanning").appendChild(utdanningNy);
document.getElementById("reset-utdanning").reset();
let formUtdanningHøyre = document.querySelector("#copy-høyre");
let clonedFormUtdanningHøyre = formUtdanningHøyre.cloneNode(true);
clonedFormUtdanningHøyre.id = "formUtdanningHøyre-kopi";
var utdanningNyHøyre = document.body.appendChild(clonedFormUtdanningHøyre);
document
.getElementById("motta-utdanningHøyre")
.appendChild(utdanningNyHøyre);
document.getElementById("output-skole").value = "";
document.getElementById("output-fag").value = "";
addEventListener("click", function (event) {
event.preventDefault();
});
}
}
<div id="copy-utdanning">
<form id="reset-utdanning" class="venstre-form">
<div class="utdanning">
<table id="duplisere-utdanning">
<h4 class="h4-venstre">Utdanning</h4>
<tr>
<label for="FraUtdanning">Fra</label>
<input type="date" rows="2" maxlength="50" id='input-år' class="venstre-input" placeholder="År" onchange="velgDatoUtdanning()"></input>
</tr>
<tr>
<label for="FraUtdanning">Til</label>
<input type="date" rows="2" maxlength="50" id='input-årtil' class="venstre-input" placeholder="År" onchange="velgDatoUtdanningTil()"></input>
</tr>
<tr>
<textarea type='text' rows="1" maxlength="50" id='input-skole' class="venstre-input" placeholder="Skole"></textarea>
</tr>
<tr>
<textarea type='text' rows="1" maxlength="50" id='input-fag' class="venstre-input" placeholder="Fag"></textarea>
</tr>
</table>
</div>
</form>
</div>
<div class="kopi-knapp">
<button class="knapp" id="appendUtdanningknapp" onclick="appendUtdanning();">Legg til utdanning</button>
</div>
<div id="motta-utdanning">
</div>
<div>
<div class="output-posisjon">
<div id="copy-utdanningHøyre">
<form id="copy-høyre">
<table id="" class="">
<tbody>
<tr>
<th>Utdanning</th>
</tr>
<tr>
<td><textarea type="date" class="textarea-høyre" type='text' id='output-år' disabled></textarea></td>
<td><textarea type="date" class="textarea-høyre" type='text' id='output-årtil' disabled></textarea></td>
</tr>
</tbody>
<tbody>
<tr>
<td><textarea class="textarea-høyre" type='text' id='output-skole' disabled></textarea></td>
<td><textarea colspan="2" class="textarea-høyre" type='text' id='output-fag' disabled></textarea></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="motta-utdanningHøyre">
</div>
</div>
</div>
这就是我重置显示日期的输出 texareas 时发生的情况:JSFiddle
任何人都知道如何正确重置输出日期字段或我哪里出错了?
解决方案
我最终找到了一个解决方法,我必须做的是创建一个类型为 html 的脚本并添加我想在其中克隆的 html,这样我不需要重置任何东西,即使它不能帮助我找出什么问题的根源是。
推荐阅读
- html - 网格中不同大小的图像
- c++ - CMake + Qt,moc 编译失败,无法实现 QMetaObject 方法(编译器找不到基本 ui 对象的标头?)
- python - Django get_absoute_url 问题?
- reactjs - 如何使用 useState 正确传播对象
- javascript - Object.assign 嵌套属性
- javascript - 我试图让一个框在单击按钮时淡出?
- node.js - 是什么导致 web3js 测试代码中的 MaxListenersExceededWarning 警告
- c++ - 在priority_queue的自定义类中重载比较运算符
- python-3.x - 函数回溯说不接收位置参数
- mongodb - 拆分为桶,并在每个桶上运行聚合