Question

我有一个输入字段。当用户输入finalAge = int(age) + factor数组中的文本时，它为元素提供了来自外部样式表的图标类，就像表情符号一样。一切都很好

显示图标时，图标名称显示在其顶部
图标更改输入字段的大小。

我什么都不想要。

这是我的代码：

emoji

Answer 1

发生这种情况是因为您要添加类em：

$(this).addClass("em em" + $(".see").html()).removeClass("see");
__________________^^

您可以在emoji.css中看到包含的类规则是：

.em {
    height: 1.5em;
    width: 1.5em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}

var emojiss = ["--abc", "--woman", "--eye"];
var emoji = ["-angel", "-alien", "----1", "---1", "--100", "--1234", "--8ball", "--a", "--ab", "--abc", "--abcd", "--accept", "--admission_tickets", "--adult", "--aerial_tramway", "--airplane", "--airplane_arriving", "--airplane_departure"];
var input = $(".input");
var input2 = $(".input").val();


$(input).on('blur', function() {
  var selected_value = $(this).val();

  if ($.inArray(selected_value, emoji) !== -1) {
    $(".see").html('<i class="em em' + selected_value + '"></i>');
  } else {
    alert("is NOT in array");
  }
});

div {
  color: blue;
}

span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet" />

<code>HEY type "-angel" for example in the input then blur the focus</code>
<br><br>
<input class="input">
<br><br>
<div class="see"></div>
<div class="add"></div>

图标意外更改输入字段大小

1 个答案: