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