使用onkeypress事件追加div

Question

主要问题：我希望输入字段根据用户键入的内容更改其宽度。这已解决。使用带有javascript追加的onKeyPress事件多次附加相同的代码时会出现问题。

这里的第一张图片显示了在用户附加代码之前代码的样子。 inputfield正在根据用户输入成功更改其宽度：

这里的第二张图显示了执行前“append”函数中相同代码的外观：

第三张图片展示了附件应该如何（顶部的代码）工作，而下面的代码显示了代码在被append执行后的样子。似乎'px';'>每次被追加时都会丢失，输入宽度变化不起作用：

第四张图片显示了所有“气泡”在被追加时最终的位置：

---

所以问题是，如何让附加代码像第一张图片一样？现在它只是添加输入字段/框而不是在用户输入文本时改变它的宽度。

编辑：代码：

var inv = 1;
$("#faPlus0").click(function () {
  if (inv < 10) {
     $(".bubbleBox").append("<span id='input-append' class='badge badge-secondary'><input type='text' name='invo" + inv + "'id='bubble' placeholder='Navn' onkeypress='this.style.width = ((this.value.length + 2) * 9) + 'px';'></span>");
                    inv++;
       };
    });

<span id="input-append" class="badge badge-secondary"><input type="text" name="invo0" id="bubble" placeholder="Navn" onkeypress="this.style.width = ((this.value.length + 2) * 9) + 'px';"></span>

Answer 1

问题是你使用keyup函数的单引号以及函数内部的字符串。这会导致一些麻烦，因为一旦你输入第二个引号（+ 'px'），你就会关闭标签。

这是生成的HTML：

<span id='input-append' class='badge badge-secondary'><input type='text' name='invox'id='bubble' placeholder='Navn' onkeypress='this.style.width = ((this.value.length + 2) * 9) + 'px';'></span>

看到有什么不对吗？ StackOverflow代码突出显示将显示您的错误。

你必须逃避这些引用才能使这项工作成功。我的建议是使用这个：

.append("... onkeypress=\"this.style.width = ((this.value.length + 2) * 9) + 'px';\"> ...

另外，在id部分之前添加一个空格。