從父窗體中取消關聯輸入

Question

是否可以從其父窗體中完全取消關聯<input>元素？我有一種情況，我必須使用<input>元素作爲文本輸入，但我不希望它成爲表單的一部分。我知道離開name屬性空白有效地隱藏了當時的大部分，但是，例如，我已經在form.elements集合上編碼循環，其中包括包括未命名的字段。我不想過濾elements列表。

我試圖在可編輯div中模擬<input>行爲，但實現變得相當複雜（處理複製/粘貼，格式化，換行符）。它看起來像form屬性可能會幫助，但我想支持IE10 +。

我希望<input>的行爲沒有包含在它的任何父母的表單提交或表單元素查詢方法中。

編輯：爲了澄清，我主要關心從form.elements集合中刪除<input>。即使該元素未命名，它仍然會出現在該列表中。

編輯2：我不能簡單地將元素移動到另一個div，因爲它們實際出現在表單中，並與其餘內容一起流動。

表單提交事件處理程序沒有幫助，因爲它們不適用於form.elements集合。

Answer 1

我想我想出了一個合適的解決方案。這感覺有點哈克（閱讀：真正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中觸發的事件。

Answer 2

迭代表單並找到所有輸入。克隆每個輸入並將其附加到某個地方，如<div>（如果您仍想保留輸入），然後使用.remove()方法刪除輸入。

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

<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>

Answer 3

您可以在您想要輸入的出現（內form）的地方放一個「容器」元素（如div），而是把實際input元素之外表單，所以它不是它在DOM樹中的後代。

然後在頁面加載，並在窗口的每一個調整大小，移動input在容器的頂部（其中有一個absolute位置樣式），而不在DOM樹改變其位置：

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);

<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>

請注意，我給容器一個黃色背景只是爲了說明它被移動的input元素完全覆蓋。

在上面的代碼中，捕獲resize事件以重新分配容器的潛在新位置和大小的input。您可以擴展它，所以當其他事件發生時，甚至以設定的時間間隔（setInterval）也會執行此重新分配。