大家好，我會保持簡短。我知道有人問過一些與此類似的問題，但沒有一個能夠回答我想要達到的目標。這就是我希望代碼執行的操作：
- 在 textarea 中鍵入正斜杠“/”時顯示 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;");
}
} )
uj5u.com熱心網友回復：
我有點忙，但我希望這會有所幫助。您可以捕獲退格如何在 onkeydown 事件中捕獲退格
uj5u.com熱心網友回復：
你很接近。順便說一句，這樣做絕對不是處理這個問題的最佳方式，但它有效。
首先，您需要將事件偵聽器更改為 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（就像您已經使用過的那樣）將是對用戶最友好的。這樣，在多個“/”的情況下沒有任何變化，并且當所有“/”都被洗掉時，工具提示也會被洗掉。
uj5u.com熱心網友回復：
更改值==而不是!= ，因為如果缺少斜杠，您想隱藏
else if (document.getElementById('contenteditable').innerHTML.indexOf("/") == -1) {
當輸入的字符不是斜線時隱藏它
tooltip.setAttribute("style", "display: none;");
由于 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/
uj5u.com熱心網友回復：
這應該可以解決您在其他答案下評論的問題。這只是尋找最后一個字符。
$("#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");
}
})
小提琴：https : //jsfiddle.net/sra7ufLy/76/
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/389895.html
標籤：javascript html 查询 css 文本区域