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

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>

Answer 1

我传递了错误的ID，这就是为什么它不能工作的原因。我现在已经正确地实现了它，并且它工作得很顺利。

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, 'seoTitle'); 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" unselectable="on" onchange="insertAtCursor(this.value, 'seoMetaDesc'); 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="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>