Bouton de simulation de retour arrière JS

Je souhaite créer un bouton de retour arrière personnalisé avec la même logique que le bouton “Retour arrière” d’un clavier. J’utilise le code suivant:

function backSpace() { var e = jQuery.Event("keyup"); e.which = 8; // # Some key code value e.keyCode = 8; $("mainDiv").sortinggger(e); }

Mais ça ne marche pas. Je ne comprends pas ce que je fais mal. Je passe beaucoup de temps à résoudre ce problème, mais je ne l’ai pas encore résolu. Aidez-moi, s’il vous plaît.

Ajout à la réponse de @ CosLu

JSBin Ici aussi

 function backSpace() { p = document.getElementById("mainDiv"); c = getCaretPosition(p); console.log(getCaretPosition(p)); str = $("#mainDiv").html(); if (c > 0 && c <= str.length) { $("#mainDiv").focus().html(str.substring(0, c - 1) + str.substring(c, str.length)); p.focus(); var textNode = p.firstChild; var caret = c - 1; var range = document.createRange(); range.setStart(textNode, caret); range.setEnd(textNode, caret); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } $.fn.setCursorPosition = function(pos) { this.each(function(index, elem) { if (elem.setSelectionRange) { elem.setSelectionRange(pos, pos); } else if (elem.createTextRange) { var range = elem.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }); return this; }; function getCaretPosition(editableDiv) { var caretPos = 0, sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount) { range = sel.getRangeAt(0); if (range.commonAncestorContainer.parentNode == editableDiv) { caretPos = range.endOffset; } } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); if (range.parentElement() == editableDiv) { var tempEl = document.createElement("span"); editableDiv.insertBefore(tempEl, editableDiv.firstChild); var tempRange = range.duplicate(); tempRange.moveToElementText(tempEl); tempRange.setEndPoint("EndToEnd", range); caretPos = tempRange.text.length; } } return caretPos; }

     JS Bin     aahahtext

Solution pour l’entrée .

 backSpace = function () { var str= $("#text_input").val(); var position = document.getElementById('text_input').selectionStart-1; str = str.substr(0, position) + '' + str.substr(position + 1); $("#text_input").val(str); }

Ce code fonctionne bien pour moi. Vous pouvez effacer lettre par lettre à la position du curseur ou supprimer une sélection

 var textbox = document.getElementById('textbox'); function backspace() { var ss = textbox.selectionStart; var se = textbox.selectionEnd; var ln = textbox.value.length; var textbefore = textbox.value.subssortingng( 0, ss ); //text in front of selected text var textselected = textbox.value.subssortingng( ss, se ); //selected text var textafter = textbox.value.subssortingng( se, ln ); //text following selected text if(ss==se) // if no text is selected { textbox.value = textbox.value.subssortingng(0, ss-1 ) + textbox.value.subssortingng(se, ln ); textbox.focus(); textbox.selectionStart = ss-1; textbox.selectionEnd = ss-1; } else // if some text is selected { textbox.value = textbefore + textafter ; textbox.focus(); textbox.selectionStart = ss; textbox.selectionEnd = ss; } }

   BACKSPACE_BUTTON

Ce serait une solution:

http://jsfiddle.net/nezkbws7/2/

 function backSpace() { var txt = $("#mainDiv").text(); txt = txt.substr(0,txt.length-1) $("#mainDiv").text(txt); }

J’ai créé la fonctionnalité de retour arrière manuellement, pas avec la copie de l’événement.

Il suffit de mettre à jour votre js pour que cela fonctionne. J’ai trouvé un extrait pour rechercher la position de curseur ici: Obtenir la position de curseur dans contentEditable div

Notez que le code suivant suppose:

Il y a toujours un seul noeud de texte dans le fichier éditable et aucun autre noeud
La propriété éditable n’a pas la propriété CSS white-space définie sur pre

 function backSpace() { p = document.getElementById ("mainDiv"); c = getCaretPosition(p); str= $("#mainDiv").html(); if(c>0 && c<=str.length){ $("#mainDiv").html(str.substring(0,c-1)+ str.substring(c,str.length)); } } function getCaretPosition(editableDiv) { var caretPos = 0, sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount) { range = sel.getRangeAt(0); if (range.commonAncestorContainer.parentNode == editableDiv) { caretPos = range.endOffset; } } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); if (range.parentElement() == editableDiv) { var tempEl = document.createElement("span"); editableDiv.insertBefore(tempEl, editableDiv.firstChild); var tempRange = range.duplicate(); tempRange.moveToElementText(tempEl); tempRange.setEndPoint("EndToEnd", range); caretPos = tempRange.text.length; } } return caretPos; }

           aahahtext