追加innerHTML会为第一个元素创建一个间隙

时间:2011-07-18 08:08:33

标签: javascript html

我有一个简单的应用程序,如果用户按下TAB或Space;一个新的输入字段被添加到div元素。

以下是用于保存输入字段的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'/>";
    }
}

这样可行,但第一个和第二个文本输入字段之间有8px的边距/间隙(比默认CSS多4个像素)。只有第一个输入字段具有额外的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 ,而是逐渐增加每个输入字段?

2 个答案:

答案 0 :(得分:3)

两个输入标记之间会有空格(换行符和格式的空格)。这将导致渲染单个空间,这将是您额外的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开头。

答案 1 :(得分:1)

在第一种情况下,DIV中有一些空格。

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

你可以写:

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