Question

我有一个简单的应用程序，如果用户按下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 ，而是逐渐增加每个输入字段？

Answer 1

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

Answer 2

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

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

你可以写：

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

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

2 个答案: