使用onkeypress事件追加div

Question

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

此处的第一张图片显示了在用户添加代码之前代码的样子。输入字段正在根据用户输入成功更改其宽度：

这里的第二张图片展示了在执行之前＆＃34;追加＆＃34; -function中相同代码的样子：

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

第四张图片展示了所有＆＃34;起泡＆＃34;在被追加时结束：

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

编辑：代码：

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部分之前添加一个空格。