附加innerHTML为第一个元素创建一个空白

Appending innerHTML creates a gap for the first element

本文关键字：一个 空白 创建 innerHTML 第一个 元素 附加      更新时间：2023-09-26

我有一个简单的应用程序，如果用户按TAB或空格;一个新的输入字段被添加到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的margin/gap(比默认的CSS多4px)。只有第一个输入字段有额外的4px边距，即使页面的CSS和HTML在Chrome中所有输入字段都是相同的。

这个问题是通过替换innerHTML容器与以下Javascript:

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

为什么在用HTML添加初始输入字段时发生这种情况，而不是替换innerHTML并增加每个输入字段?

两个输入标签之间会有空白(换行符和格式空格)。这将导致一个单独的空间被渲染，这将是你额外的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是无效的-它应该以字母开头。在html中，id属性的有效值是什么

在第一种情况下，div中有一些空白。

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

你可以写:

<div ...><input ... /></div>
相关文章：