是否可以通过javascript将@ font-face html实体输入到输入中？

Question

我有一个文字输入：<input type="text">我有一个Icomoon @ font-face字体设置，它有一些符号，我希望通过用户点击的某些按钮进入输入。

我的font-face字体可以选择使用 HTML实体，例如：



我的javascript创建了一个数据属性值数组，然后我将其映射到十六进制值，例如此心脏符号（注意我认为我在调用十六进制值时是正确的）：

\u2665

那么有什么方法可以让我发挥作用。或者我需要重新考虑我的方法。将HTML实体直接放入我的HTML中会显示该图标有效，我猜测它如何被置于导致问题的输入中的.val();。

＆＃13;

＆＃13;

$('.char__item-indv').click(function(event) {

  var word = $(this).attr('data-value'),
      input_word = $('#wordSelector').val(),
      input_start_word = $('#wordSelector')[0].defaultValue,
      char_array = new Array();

  char_array['and'] = '&';
  char_array['apo'] = '\x27';
  char_array['at'] = '@';
  char_array['bee'] = '';
  char_array['dot'] = '.';
  char_array['heart'] = '\u2665';
  char_array['the'] = '';

  if(input_word == input_start_word) {
    input_word = '';
  }

  if(input_word.length < 12) {
    var new_word = input_word+char_array[word];
    $('#wordSelector').val(new_word);
    $(this).prop("selectedIndex",0);
    $('#wordSelector').focus();
  }

});

＆＃13;

.word-selector__input {
  margin-bottom: 24px;
}
.word-selector__char {
  margin-bottom: 24px;
}
.word-selector .char__item {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="word-selector">

  <div class="word-selector__input">
    <input name="input-word" type="text" maxlength="12" id="wordSelector" />
  </div>

  <div class="word-selector__char">
    <div class="char__item">
      <img class="char__item-indv" alt="AND" src="http://placehold.it/50x50" data-value="and" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="Apostrophe" src="http://placehold.it/50x50" data-value="apo" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="@" src="http://placehold.it/50x50" data-value="at" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="Bee" src="http://placehold.it/50x50" data-value="bee" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="Dot" src="http://placehold.it/50x50" data-value="dot" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="Heart" src="http://placehold.it/50x50" data-value="heart" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="The" src="http://placehold.it/50x50" data-value="the" />
    </div>
  </div>

  <div class="word-selector__submitter">
    <input type="submit" name="Btn1" value="Go" onclick="" id="Btn1" />
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

为了让事情变得更轻松，我做了一个有效的例子： http://codepen.io/vdecree/pen/QwOvaX

Answer 1

让html做转换它的艰苦工作：

var text = $("<div/>").html(char_array[word]).text();
var new_word = input_word + text;

---

＆＃13;

＆＃13;

$('.char__item-indv').click(function(event) {

  var word = $(this).attr('data-value'),
      input_word = $('#wordSelector').val(),
      input_start_word = $('#wordSelector')[0].defaultValue,
      char_array = new Array();

  char_array['and'] = '&';
  char_array['apo'] = '\x27';
  char_array['at'] = '@';
  char_array['bee'] = '';
  char_array['dot'] = '.';
  char_array['heart'] = '\u2665';
  char_array['the'] = '';

  if(input_word == input_start_word) {
    input_word = '';
  }

  if(input_word.length < 12) {
    var text = $("<div/>").html(char_array[word]).text();
    var new_word = input_word + text;
    $('#wordSelector').val(new_word);
    $(this).prop("selectedIndex",0);
    $('#wordSelector').focus();
  }

});

＆＃13;

.word-selector__input {
  margin-bottom: 24px;
}
.word-selector__char {
  margin-bottom: 24px;
}
.word-selector .char__item {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="word-selector">

  <div class="word-selector__input">
    <input name="input-word" type="text" maxlength="12" id="wordSelector" />
  </div>

  <div class="word-selector__char">
    <div class="char__item">
      <img class="char__item-indv" alt="AND" src="http://placehold.it/50x50" data-value="and" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="Apostrophe" src="http://placehold.it/50x50" data-value="apo" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="@" src="http://placehold.it/50x50" data-value="at" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="Bee" src="http://placehold.it/50x50" data-value="bee" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="Dot" src="http://placehold.it/50x50" data-value="dot" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="Heart" src="http://placehold.it/50x50" data-value="heart" />
    </div>
    <div class="char__item">
      <img class="char__item-indv" alt="The" src="http://placehold.it/50x50" data-value="the" />
    </div>
  </div>

  <div class="word-selector__submitter">
    <input type="submit" name="Btn1" value="Go" onclick="" id="Btn1" />
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;