删除输入后jQuery无法将文本附加到html

Question

我有一个表单，您可以在其中通过降价或单击表情符号选择器来附加表情符号。当点击选择器中的表情符号时，它会运行以下 jQuery 代码：

$('.emoji-container').click(function () {
   var target = $(this).closest('.emoji-container');
   var emojiName = target.data('clipboard');

   var activityLength = $('.input-field').val().length;
   var emojiLength = (emojiName).length;
   var totalLength = activityLength + emojiLength;

   if (totalLength < 90) {
     $('.clipboard-emoji').html("Added: '" + emojiName + "'");
     $('.input-field').append(emojiName + " ");
      console.log(activityLength, '+', emojiLength, '=', totalLength)
   } else {
     $('.clipboard-emoji').html("Max. characters reached, can't copy");
     console.log('full')
   }
});

所以每个人的工作都很完美，但是当我删除输入字段中的字符时，有足够的时间再次添加另一个表情符号，它不会将其附加到输入字段。我的表情符号被添加为这样的降价：:smiley:

我的控制台：

0 "+" 19 "=" 19   // at this point I add the first emoji
20 "+" 19 "=" 39
40 "+" 19 "=" 59
60 "+" 19 "=" 79
full              // at this point the max is reached and I clear the input again
0 "+" 19 "=" 19   // at this point I cleared the whole input field
0 "+" 10 "=" 10   // as you can see the input length stays 0
0 "+" 11 "=" 11
0 "+" 7 "=" 7
0 "+" 8 "=" 8

我不明白为什么在删除字符或输入字段中的整个输入时它不会再次添加它们

Fiddle Demo

Answer 1

更改以下行

$('.input-field').append(emojiName + " ");

到

$('.input-field').val($('.input-field').val() + emojiName + ' ');

显然append 不适合此操作，但val() 适合。我不完全知道为什么，但是嘿，它有效！

编辑： 如果您想提高性能，请将选择器存储在变量中：

var $inputField = $('.input-field')

编辑 2：

$(textarea).append(txt) 不像你 [针对那个问题的海报] 认为的那样工作。加载页面时，文本区域内的文本节点将设置该表单字段的值。之后，文本节点和值可以断开连接。当您在字段中键入时，值会发生变化，但 DOM 上的文本节点不会发生变化。然后使用 append() 更改文本节点，浏览器会删除该值，因为它知道标签内的文本节点已更改。

所以你想设置值，你不想追加。为此使用 jQuery 的 val() 方法。

Source