Question

是否可以将<input>元素与其父表单完全取消关联？我有一种情况，我必须使用<input>元素进行文本输入，但我不希望它成为表单的一部分。我知道将name属性留空有效地隐藏了大多数字段的时间，但是，例如，我已经在所做的form.elements集合上编码循环/ em>包括未命名的字段。我不想过滤elements列表。

我尝试在可编辑的div中模拟<input>行为，但实现变得相当复杂（处理复制/粘贴，格式化，换行符）。看起来form属性可能会有所帮助，但我想支持IE10 +。

我想要<input>行为，而不将其包含在任何父母的表单提交或表单元素查询方法中。

编辑：为了澄清，我主要关注的是从<input>集合中移除form.elements。即使该元素未命名，它仍会出现在该列表中。

编辑2：我不能简单地将元素移动到另一个div，因为它们实际上出现在表单中并与其余内容一起流动。

表单提交事件处理程序没有用，因为它们不适用于form.elements集合。

Answer 1

迭代表单并找到所有输入。克隆每个输入并将其附加到某个位置<div>（如果您仍想保留输入），然后使用.remove()方法删除输入。

＆＃13;

$('form :input').each(function(){
  $input=$(this).clone(true);
  $('#container').append($input).append('<br>');
  $(this).remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Inside Form
  <input type="text" id="txt1" name="txt1" value="txt1"><br>
  <input type="text" id="txt2" name="txt2" value="txt2">
</form>
<br>
<br>
<div id="container">
  Inside Div <br>
</div>

＆＃13;

Answer 2

你可以放一个＆＃34;容器＆＃34;元素（如div）在您希望输入的位置（在form内），但将实际的input元素放在表单之外，因此它不是它的后代在DOM树中。

然后在页面加载时，在窗口的每个大小调整上，将input（具有absolute位置样式）移动到容器顶部，而不更改其在DOM树中的位置：

＆＃13;

function positionInput() {
    var myinput = document.querySelector('#myinput');
    // give input same size as container element
    var container = document.querySelector('#container');
    myinput.style.height = container.offsetHeight + 'px'; 
    myinput.style.width = container.offsetWidth + 'px';
    // move input element to the container location
    myinput.style.top = container.offsetTop + 'px';
    myinput.style.left = container.offsetLeft + 'px';
}

document.addEventListener('DOMContentLoaded', positionInput);
window.addEventListener('resize', positionInput);

＆＃13;

<input id="myinput" style="position:absolute" value="hello">
<h1>Title of form</h1>
<form style="margin: 10px">
    <div id="container" style="background: yellow">&nbsp;</div>
</form>

＆＃13;

请注意，我为容器添加了黄色背景，以证明它已被移动的input元素完全覆盖。

在上面的代码中，捕获resize事件以将input重新分配给容器的潜在新位置和大小。您可以对此进行扩展，因此在其他事件发生时，甚至以设定的时间间隔（使用setInterval）执行此重新分配。

Answer 3

我想我想出了一个合适的解决方案。感觉有点hacky（读：非常hacky），但完成了我需要做的事情。如果有人有任何更好的想法让我知道。

如果我将输入包装在iframe中，它会有效地隐藏在表单中。不幸的是，我认为我不能直接将输入附加到子文档中，因此需要手动克隆。这是我快速而肮脏的概念证明代码：

<style>
    iframe {
        border: 0;
        width: 100%;
    }
</style>
<form id="myForm">
    <input style="width: 100%"/>
</form>
<script>
    (function() {
        var myForm = document.getElementById("myForm");
        console.log(myForm.elements.length);
        var input = myForm.querySelector("input");
        input.parentElement.removeChild(input)
        var frame = myForm.appendChild(document.createElement("iframe"));
        var frameInput = frame.contentDocument.querySelector("body").appendChild(frame.contentDocument.createElement("input"));
        frameInput.setAttribute("style", input.getAttribute("style"));
        console.log(myForm.elements.length);
        frameInput.addEventListener("click", externalListener);
    })();

    function externalListener() {
        alert();
    }
</script>

这表明父表单不再看到输入，并且父文档仍然可以监听从iframe中触发的事件。

从父表单中取消输入

3 个答案: