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

Question

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

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



我的javascript创建了一个数据属性值数组，然后将其映射到十六进制值，例如这个心形符号(注意我认为我将其称为十六进制值是正确的):

\u2665

有什么办法可以让它工作吗？或者我需要重新考虑我的方法。将 HTML 实体直接放入我的 HTML 中会显示该图标有效，我猜测它是如何通过设置 .val(); 放置的在输入中它会引起问题。

$('.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();
  }

});

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

<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>

为了让事情变得更容易，我做了一个工作示例: http://codepen.io/vdecree/pen/QwOvaX

Answer 1

让 html 来完成转换它的艰苦工作:

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

---

$('.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();
  }

});

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

<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>