【发布时间】：2020-04-27 09:27:58
【问题描述】：
每当用户从下拉列表中选择一个 sn-p 时，我都有一个预定义文本 sn-p 列表，我想将其插入到当前光标位置的文本区域中。
我尝试过如下实现它，但没有成功。 我收到此错误：
add_home:228 Uncaught TypeError: 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>【问题讨论】：
-
您传递的是
select的 ID，而不是texarea的 ID -
insertAtCursor(this.value, 'snippetForseoTitle');应该是insertAtCursor(this.value, 'seoTitle'); -
成功了！愚蠢的错误。谢谢先生帮我解答！非常感谢:)
-
先生，我怎样才能使插入的 sn-p 与文本区域内的普通文本区分开来..？如何更改所选 sn-p 文本的样式？
-
<Textarea>就是那个文本 - 你需要一个富文本编辑器第三方控件（最好是已经构建了一个尝试重新创建它的控件）
标签： javascript html jquery dom