我想创建一个自定义退格按钮，其逻辑与键盘上的“退格”按钮相同。我使用以下代码：
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>
但它不起作用。我不明白我做错了什么。我花了很多时间来解决这个问题，但我还没有解决它。请帮帮我。
答案 0 :(得分：3)
输入解决方案。
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'/>
希望这有帮助。
答案 1 :(得分：3)
加入@CosLu的答案
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>
答案 2 :(得分：2)
这段代码对我来说很好。 您可以在插入位置逐字清除或清除选择
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>
希望有所帮助！
答案 3 :(得分：1)
只需更新您的js即可使其正常运行。我找到了一个片段来查找插入位置：Get caret position in contentEditable div
请注意，以下代码假定：
在editable和no中总是有一个文本节点 其他节点
可编辑的div没有将CSS空白属性设置为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>
答案 4 :(得分：1)
这将是一个解决方案：
http://jsfiddle.net/nezkbws7/2/
function backSpace()
{
var txt = $("#mainDiv").text();
txt = txt.substr(0,txt.length-1)
$("#mainDiv").text(txt);
}
我手动创建了退格功能，而不是复制事件。