大家好，我简短一点。我知道有人问过一些类似的问题，但没有一个能回答我想要实现的目标。这就是我想要代码做的：
- 当正斜杠时显示div"在文本区域中键入
- 未键入正斜杠时不显示div
- 删除正斜杠/退格时隐藏弹出窗口
我现在使用以下代码可以实现前两个：https://jsfiddle.net/jtk37vs8/1/.然而问题是，每当我键入正斜杠然后删除它时，弹出窗口仍然保持不变。我是JS的新手，代码有点杂乱无章，但很容易理解。所以基本上，如果你们中的任何一个人能告诉我是否有任何直接的方法来实现这一点，我会很感激？谢谢你的耐心和阅读我的问题。
function getCaretCoordinates() {
let x = 0,
y = 0;
const isSupported = typeof window.getSelection !== "undefined";
if (isSupported) {
const selection = window.getSelection();
// Check if there is a selection (i.e. cursor in place)
if (selection.rangeCount !== 0) {
// Clone the range
const range = selection.getRangeAt(0).cloneRange();
// Collapse the range to the start, so there are not multiple chars selected
range.collapse(true);
// getCientRects returns all the positioning information we need
const rect = range.getClientRects()[0];
if (rect) {
x = rect.left; // since the caret is only 1px wide, left == right
y = rect.top; // top edge of the caret
}
}
}
return { x, y };
}
function getCaretIndex(element) {
let position = 0;
const isSupported = typeof window.getSelection !== "undefined";
if (isSupported) {
const selection = window.getSelection();
// Check if there is a selection (i.e. cursor in place)
if (selection.rangeCount !== 0) {
// Store the original range
const range = window.getSelection().getRangeAt(0);
// Clone the range
const preCaretRange = range.cloneRange();
// Select all textual contents from the contenteditable element
preCaretRange.selectNodeContents(element);
// And set the range end to the original clicked position
preCaretRange.setEnd(range.endContainer, range.endOffset);
// Return the text length from contenteditable start to the range end
position = preCaretRange.toString().length;
}
}
return position;
}
$("#contenteditable").bind("keypress", function toggleTooltip(e) {
const tooltip = document.getElementById("tooltip");
if(String.fromCharCode(e.keyCode) == '/') {
const { x, y } = getCaretCoordinates();
$(".tooltip").show();
// tooltip.setAttribute("aria-hidden", "false");
tooltip.setAttribute( "style", `display: inline-block; left: ${x - -10}px; top: ${y - 160}px`
);
}
else if (document.getElementById('contenteditable').innerHTML.indexOf("/") != -1) {
// $(".tooltip").hide();
// tooltip.setAttribute("aria-hidden", "true");
tooltip.setAttribute("style", "display: none;");
}
// else if (document.getElementById('contenteditable').innerHTML.indexOf("/") >=0) {
// tooltip.setAttribute("aria-hidden", "true");
//tooltip.setAttribute("style", "display: none;");
// }
else {
// $(".tooltip").hide();
// tooltip.setAttribute("aria-hidden", "true");
//tooltip.setAttribute("style", "display: none;");
}
} )
你很接近。顺便说一句，这样做肯定不是处理这件事最有效的方式，但它确实有效。
首先，您需要将事件侦听器更改为keydown。如果我没记错的话，按键不适用于退格/删除。一旦你做到了，就很容易添加你已经拥有的东西。
if (e.keyCode == 46) {
// ... check if '/' is in the text area value, you already have this code
// OR
// ... check if the last index of document.getElementById('textarea-id').value is a '/'
}
虽然这里的条件语句有很多错误，但我想使用indexOf(就像你已经使用过的(将是最友好的。这样，在多个"/"的情况下不会发生任何变化，并且当删除所有"/"时，工具提示将被删除。
更改值==而不是=如果斜线缺少，则需要隐藏
else if (document.getElementById('contenteditable').innerHTML.indexOf("/") == -1) {
当键入的字符不是斜线时，隐藏
tooltip.setAttribute("style", "display: none;");
由于backspace不是由keypress事件处理的，我们将在keyup事件中使用不同的处理程序来处理它，如下所示
$("#contenteditable").on("keyup", function toggleTooltip(e) {
if (document.getElementById('contenteditable').innerHTML.indexOf("/") == -1) {
// $(".tooltip").hide();
// tooltip.setAttribute("aria-hidden", "true");
tooltip.setAttribute("style", "display: none;");
}
});
工作小提琴代码https://jsfiddle.net/BETOMBO_Mariot/a5ntzjg4/
这应该可以解决您在其他答案下评论的问题。这只是在寻找最后一个角色。
$("#contenteditable").on("keyup", function(e) {
const tooltip = document.getElementById("tooltip");
let content = document.getElementById('contenteditable').innerHTML;
if(content[content.length - 1] == "/") {
const {x, y} = getCaretCoordinates();
tooltip.setAttribute("style", `display: inline-block; left: ${x + 10}px; top: ${y - 160}px`
);
}
else {
tooltip.setAttribute("style", "display: none");
}
})
Fiddle：https://jsfiddle.net/sra7ufLy/76/