function createAdditionalDiv() {
let innerBox = document.createElement('div')
innerBox.contentEditable = "true"
innerBox.id = totalBoxes++;
innerBox.className = "mainBox"
let mainBox = document.getElementById('mainContainer')
innerBox.addEventListener('keyup', checkTrigger)
mainBox.appendChild(innerBox);
$(".mainBox").on("keydown", function (event) {
if (event.key === 'Backspace' || event.key === 'Delete') {
let deletionMarker = document.createElement('span');
deletionMarker.hidden = true
deletionMarker.id = "deletionMarker"
putDataToCarentPos(deletionMarker.outerHTML.toString(), false);
let previousTag = document.querySelector('#deletionMarker').previousSibling
while (!previousTag.textContent) {
previousTag = previousTag.previousSibling
}
if (previousTag.tagName === "SPAN") {
if (previousTag.className === "toDelete") {
event.preventDefault();
document.getElementById('deletionMarker').remove();
document.querySelector('.toDelete').remove()
}
else {
event.preventDefault();
document.getElementById('deletionMarker').remove();
previousTag.className = 'toDelete';
event.stopImmediatePropagation();
}
}
else {
document.getElementById('deletionMarker').remove();
}
}
});
}
Hey there! I'm facing an issue with a specific function in my mobile deployed app. You can find the app hosted here. The application is designed for notekeeping and has a feature where typing "<>" allows you to autocomplete from other divs. However, the backspace functionality is not working as expected on mobile devices. When selecting an item from a dropdown and pressing backspace, it selects the entire div instead of deleting characters. This seems to be functioning properly on emulators and web apps, but not on mobile devices. Can anyone suggest what modifications need to be made to resolve this issue?
Specifically, the double backspace to delete feature is not working correctly on mobile devices, even though it works fine on emulators and web apps.