Geek Answers Handbook

Simulate the backspace JS button

I want to create a custom backspace button with the same logic as the backspace button on the keyboard. I am using the following code:

function backSpace() { var e = jQuery.Event("keyup"); e.which = 8; // # Some key code value e.keyCode = 8; $("mainDiv").trigger(e); } 
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <script src="formulas.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no"/> </head> <button onclick="backSpace()">backSpace</button> <body id="main" spellcheck="false"> <div id = "mainDiv" contenteditable="true"></div> </body> </html>

But that will not work. I do not understand what I am doing wrong. I spend a lot of time on this problem, but I have not solved it yet. Help me please.

+6
source share
5 answers

Addition to @CosLu Answer

Jsbin here also

 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; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <button onclick="backSpace()">backSpace</button> <div id="mainDiv" contenteditable="true">aahahtext</div> </body> </html>
+3
source

Input solution .

 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); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="backSpace()">backSpace</button> <input type='text' id='text_input' value='123456789'/>

Hope this helps.

+3
source

This code is great for me. You can clear the letter at the caret position or clear the selection

 var textbox = document.getElementById('textbox'); function backspace() { var ss = textbox.selectionStart; var se = textbox.selectionEnd; var ln = textbox.value.length; var textbefore = textbox.value.substring( 0, ss ); //text in front of selected text var textselected = textbox.value.substring( ss, se ); //selected text var textafter = textbox.value.substring( se, ln ); //text following selected text if(ss==se) // if no text is selected { textbox.value = textbox.value.substring(0, ss-1 ) + textbox.value.substring(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; } } 
 <textarea id="textbox"></textarea> <div class="button" onclick="backspace()" > BACKSPACE_BUTTON </div>

Hope this helps!

+2
source

Just update js to make it work. I found a snippet for finding a carriage position here: Get the carriage position in a contentEditable div

Please note that the following code assumes:

  • Within editable text, there is always only node text and no other nodes

  • Modified div does not have CSS white space property set in 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; } 
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <script src="formulas.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no"/> </head> <body id="main" spellcheck="false"> <button onclick="backSpace()">backSpace</button> <div id = "mainDiv" contenteditable="true">aahahtext</div> </body> </html>
+1
source

This will be the solution:

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

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

I created the backspace function manually, not copying the event.

+1
source

More articles:


All Articles