附加innerHTML創建第一個元素的差距

我有一個簡單的應用程序，其中如果用戶按TAB或空格;一個新的輸入字段被添加到一個div元素。附加innerHTML創建第一個元素的差距

以下是用於保存輸入字段的div元素的一個片段：

<div class="container" id="container" onkeydown="KeyDown(event)"> 
    <input type="text" maxlength="15" id="0"/> 
</div>

以下是我使用添加輸入字段的JavaScript代碼：

function KeyDown(e) { 
    var container = document.getElementById("container"); 

    if(e.which === 9 || e.which === 32) { //User pressed Tab or Space 
     container.innerHTML += "<input type='text' maxlength='15' id='0'/>"; 
    } 
}

該作品，但第一個和第二個文本輸入字段之間存在8像素的邊距/間距（比默認CSS多4px）。只有第一個輸入字段具有額外的4px頁邊距，即使該頁面的CSS和HTML在Chrome中的所有輸入字段中都是相同的。

問題是由具有以下的Javascript替換容器的innerHTML的固定：

if(c === 1) { //c is the number/count of input elements 
    container.innerHTML = "<input type='text' maxlength='15' id='0'/>"; 
} 

... 
c++;

，同時用HTML加入初始輸入字段，與更換innerHTML的和他們爲什麼會發生這種情況增量每個輸入字段？

來源

2011-07-18 AquaGeneral

兩個輸入標籤之間會有空格（換行符和空格用於格式化）。這將導致一個空間被渲染，這將是你的額外4px。它應該工作，如果您更改您的最初的HTML爲：

<div class="container" id="container" onkeydown="KeyDown(event)"> 
    <input type="text" maxlength="15" 
    id="0"/></div>

糟糕的格式，但標記內的換行符未格式化。

我認爲，如果你追加新的輸入，而不是操縱innerHTML，你也可能，避免空白：

function KeyDown(e) { 
    var container = document.getElementById("container"); 

    if(e.which === 9 || e.which === 32) { //User pressed Tab or Space 
     var newInput = document.createElement('input'); 
     newInput.id = "0"; 
     newInput.type = "text"; 
     newInput.maxlength = "15" 
     container.appendChild(newInput); 
    } 
}

順便提一下，數字ID是無效的 - 它應該以字母開頭What are valid values for the id attribute in html。

來源

2011-07-18 08:13:02 detaylor

感謝您的答覆。我真的不知道數字值不能單獨作爲id使用 - 在我只在特定項目中使用數字值之前指出它的好處。 – AquaGeneral

在第一種情況下，DIV中有一些空格。

...keydown="KeyDown(event)"> [space] [space] [cr] [lf] 
[space] [space] <input type="text" max...> [space] [cr] [lf] 
[space] [space] [tab] </div>

你可以寫：

<div ...><input ... /></div>

來源

2011-07-18 08:15:21 ern0

感謝您的簡短回覆:) – AquaGeneral

附加innerHTML創建第一個元素的差距

回答

相關問題