HTML标记显示为<tags>，并且不会在其上应用CSS

Question

我有一个标记，当我在其中键入＃或@时，我尝试应用一些CSS，但是输出返回<span class="hightlight>

我想做的是应用<span class="hightlight">样式并消失HTML标记

因此，预期的输出应在其中以及输入标记中都具有CSS样式

JavaScript：

$(function() {
            var hashtags = false;
            var at = false;
            $(document).on('keydown', '.hashtag', function(e) {        
                arrow = {
                    hashtag: 51,
                    at: 48,
                    space: 32
                };
                var input_field = $(this);
                switch (e.which) {
                    case arrow.hashtag:
                    input_field.val(input_field.val() + "<span class='highlight'>");
                    hashtags = true;
                    break;
                    case arrow.at:
                    input_field.val(input_field.val() + "<span class='highlight'>");
                    at = true;
                    break;
                    case arrow.space:
                    if(hashtags) {
                        input_field.val(input_field.val() + "</span>");
                        hashtags = false;
                    }
                    if(at) {
                        input_field.val(input_field.val() + "</span>");
                        at = false;
                    }
                    break;
                }
            });
        });

HTML / CSS：

<input type="text" class="hashtag" placeholder="#...">
<style>
  .highlight {
    background-color: red;
  }
</style>

所以，我要做的是将CSS样式放入输入标签