我使用 contenteditable div 作为输入字段来输入一些文本，并通过该文本中的按钮（小 html 图片）插入图标。
只要文本比 contenteditable 字段窄，就可以了。
一旦文本比字段长（因此它被部分隐藏）：
当我输入文本字符时，这也很好，按下按键后会自动显示最后一个字符，以便您始终可以看到您正在输入的内容。
但是，当我通过按钮输入图标时，该图标就在那里，但它是隐藏的，因为字段内容不会移动以使新输入的图标可见，直到我输入另一个文本字符。
有什么解决方案可以让用户始终看到最后输入的元素（文本或 html）吗？
function pasteIcon(html) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(),
node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
document.selection.createRange().pasteIcon(html);
}
}
$(document).ready(function() {
$('.buttOn').click(function() {
$('.contEd').focus();
pasteIcon('<img class="icOn" src="http://www.bmgstuff.com/files/interface/generator_frame/text_blood.png">');
})
});
[contenteditable="true"] {
display: inline;
white-space: nowrap;
overflow: hidden !important;
text-overflow: inherit;
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
[contenteditable="true"] br {
display: none;
}
.contAiner {
display: flex;
}
.buttOn {
width: 24px;
height: 24px;
border: none;
background: #666;
color: white;
}
.contEd {
height: 22px;
text-align: center;
width: 100px;
line-height: 23px;
color: black;
font-size: 10.5px;
font-family: arial;
border: 1px solid black;
}
.icOn {
width: 9px;
height: 13px;
top: 1px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contAiner">
<input class="buttOn" type="button" value="B">
<div class="contEd" contenteditable="true" spellcheck="false" autocomplete="off"></div>
</div>
这里是jsFiddle https://jsfiddle.net/n03hcrnh/36/
这是我从中获取了“pasteIcon”函数。
PS：我尝试在 PasteIcon 函数之后触发键码 39（右箭头）以模拟按键，但它不起作用。
您只需将编辑器滚动到插入的图标即可。请注意移动选择后的两行代码。希望它能按您的预期工作:)
UPDATE:
为了涵盖所有情况，我们需要检查插入的图像是否在编辑器范围之内或之外。
首先，我们将 id 添加到编辑器元素中，这样会更容易。然后我们可以利用函数 getBoundingClientRect 返回屏幕上实际元素的矩形。最后，我们比较矩形，如果图像矩形不在编辑器内 (imgRect.left editorRect.right)，则我们滚动。
更新2：
在调查最新评论中描述的问题期间，我发现在编辑一定长度的内容后，jQuery 函数“offset”返回不准确的结果。最有可能的是，这是因为在这种情况下编辑器的 leftOffset 不会自动更新。
最后，我将所需的滚动位置计算更改为图像 DOM 元素的 offsetLeft 减去编辑器元素的 offsetLeft 减去 1（边框大小），现在它适用于任何内容长度。
function pasteIcon(html) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(),
node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
var editorRect = $(contEdit)[0].getBoundingClientRect();
var imgRect = $(lastNode)[0].getBoundingClientRect();
if (imgRect.left < editorRect.left || imgRect.right > editorRect.right) {
var actualLeft = $(lastNode)[0].offsetLeft - editorRect.left - 1;
$(".contEd").scrollLeft(actualLeft);
}
}
}
} else if (document.selection && document.selection.type != "Control") {
document.selection.createRange().pasteIcon(html);
}
}
$(document).ready(function() {
$('.buttOn').click(function() {
$('.contEd').focus();
pasteIcon('<img class="icOn" src="http://www.bmgstuff.com/files/interface/generator_frame/text_blood.png">');
})
});
[contenteditable="true"] {
display: inline;
white-space: nowrap;
overflow: hidden !important;
text-overflow: inherit;
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
[contenteditable="true"] br {
display: none;
}
.contAiner {
display: flex;
}
.buttOn {
width: 24px;
height: 24px;
border: none;
background: #666;
color: white;
}
.contEd {
height: 22px;
text-align: center;
width: 100px;
line-height: 23px;
color: black;
font-size: 10.5px;
font-family: arial;
border: 1px solid black;
}
.icOn {
width: 9px;
height: 13px;
top: 1px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contAiner">
<input class="buttOn" type="button" value="B">
<div id="contEdit" class="contEd" contenteditable="true" spellcheck="false" autocomplete="off"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
