如何在文本区域标签中的特定光标位置插入选择标签下拉值作为文本片段？

Question

我有一个预定义的文本片段列表，我想在用户从下拉列表中选择一个片段时，将其插入到当前光标位置的文本区域中。

我试着像下面这样实现它，但是没有成功。我得到了这个错误。

add_home:228 未捕获类型错误：field.setSelectionRange不是一个函数。

请帮我解决一下。谢谢你的帮助。

function insertAtCursor(text, areaId) {
  var field = document.getElementById(areaId);

  if (document.selection) {
    var range = document.selection.createRange();

    if (!range || range.parentElement() != field) {
      field.focus();
      range = field.createTextRange();
      range.collapse(false);
    }
    range.text = text;
    range.collapse(false);
    range.select();
  } else {
    field.focus();
    var val = field.value;
    var selStart = field.selectionStart;
    var caretPos = selStart + text.length;
    field.value = val.slice(0, selStart) + text + val.slice(field.selectionEnd);
    field.setSelectionRange(caretPos, caretPos);
  }
}

textarea {
  resize: vertical;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-8 col-xs-8 col-lg-offset-2 col-xs-offset-2">
    <div class="box">
      <div class="box-header with-border">
        <h3 class="box-title">Home</h3>
      </div>
      <div class="box-body">
        <form method="post" id="addHomeForm" enctype="multipart/form-data">

          <fieldset class="form-group">
            <div class="pull-right" style="margin-bottom: 0.5em;">
              <select name="snippetForseoTitle" id="snippetForseoTitle" class="form-control" unselectable="on" onchange="insertAtCursor(this.value, 'snippetForseoTitle'); return false">
                <option value="" selected disabled>Insert Snippet</option>
                <option value="%%site_title%%">Site Title</option>
                <option value="%%seperator%%">Seperator</option>
                <option value="%%primary_category%%">Primary Category</option>
                <option value="%%primary_store%%">Primary Store</option>
              </select>
            </div>
            <label for="seoTitle">SEO Title</label>
            <textarea class="form-control" name="seoTitle" id="seoTitle" placeholder="SEO Title"></textarea>
            <span class="text-danger"></span>
          </fieldset>

          <fieldset class="form-group">
            <div class="pull-right" style="margin-bottom: 0.5em;">
              <select name="snippetForseoMetaDesc" id="snippetForseoMetaDesc" class="form-control">
                <option value="" selected disabled>Insert Snippet</option>
                <option value="%%site_title%%">Site Title</option>
                <option value="%%seperator%%">Seperator</option>
                <option value="%%primary_category%%">Primary Category</option>
                <option value="%%primary_store%%">Primary Store</option>
              </select>
            </div>
            <label for="seoMetaDesc">SEO Description</label>
            <textarea class="form-control" name="seoMetaDesc" id="seoMetaDesc" placeholder="SEO Meta Description"></textarea>
            <span class="text-danger"></span>
          </fieldset>

          <fieldset>
            <label for="seoKeyPhrase">SEO Keyphrase</label>
            <input type="text" class="form-control" name="seoKeyPhrase" id="seoKeyPhrase" placeholder="SEO Keyphrase">
            <span class="text-danger"></span>
          </fieldset>

          <div class="box-footer text-center">
            <button type="submit" class="btn btn-success">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>