Javascript onclick 用作退格按钮以删除插入符号前的字符

Question

我创建了一个退格按钮。起初它是这样设置的。退格键仅在字符串末尾起作用。

function setBack(){document.getElementById('someText').value = document.getElementById('someText').value.substring(0, document.getElementById('someText').value.length - 1);focus();}

但我希望 Backspace 按钮在胡萝卜位置不只是字符串末尾的情况下起作用，所以我想到了这个。我的问题是我怎样才能让这个按钮在字符向后移动时删除它，而不仅仅是跳到字符串的末尾并删除。我创建了该按钮的副本，以便您可以滚动浏览字符，但我希望退格按钮实际删除该字符。

function focus() {
  var foo = document.getElementById('someText');
  foo.focus();
  foo.setSelectionRange(foo.value.length, foo.value.length);
  inputLen = document.getElementById('someText').value.length;
}

function setOne() {
  document.getElementById('someText').value += "A";
  focus();
}

function setTwo() {
  document.getElementById('someText').value += "B";
  focus();
}

function setBack() {
  var elem = document.getElementById('someText');
  elem.setSelectionRange(elem.value.length, getInputSelection(elem).start - 1);
  elem.focus();
}

function moveBack() {
  var elem = document.getElementById('someText');
  elem.setSelectionRange(elem.value.length, getInputSelection(elem).start - 1);
  elem.focus();
}

function getInputSelection(el) {
  var start = 0,
    end = 0,
    normalizedValue, range,
    textInputRange, len, endRange;
  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    start = el.selectionStart;
    end = el.selectionEnd;
  } else {
    range = document.selection.createRange();
    if (range && range.parentElement() == el) {
      len = el.value.length;
      normalizedValue = el.value.replace(/\r\n/g, "\n");
      textInputRange = el.createTextRange();
      textInputRange.moveToBookmark(range.getBookmark());
      endRange = el.createTextRange();
      endRange.collapse(false);
      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
        start = end = len;
      } else {
        start = -textInputRange.moveStart("character", -len);
        start += normalizedValue.slice(0, start).split("\n").length - 1;
        if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
          end = len;
        } else {
          end = -textInputRange.moveEnd("character", -len);
          end += normalizedValue.slice(0, end).split("\n").length - 1;
        }
      }
    }
  }
  return {
    start: start,
    end: end
  };
}

.inputUser {
  width: 55%;
  float: left;
  margin-top: 3%;
  border: 0px;
  overflow-x: scroll;
  text-align: left;
  border: 1px #000000 solid;
}

<input id="someText" class="inputUser" type="text" readonly dir="rtl">

<div>
  <button onclick="setOne();">A</button>
  <button onclick="setTwo();">B</button>
  <button onclick="setBack();">Backspace</button>
  <button onclick="moveBack();">MoveBack</button>
</div>

请不要使用 JQuery。谢谢。

Answer 1

试试这个:

function focus() {
  var foo = document.getElementById('someText');
  foo.focus();
  foo.setSelectionRange(foo.value.length, foo.value.length);
  inputLen = document.getElementById('someText').value.length;
}

function setOne() {
  document.getElementById('someText').value += "A";
  focus();
}

function setTwo() {
  document.getElementById('someText').value += "B";
  focus();
}

function setBack() {
  var elem = document.getElementById('someText');
  var pos = getInputSelection(elem).start;
  elem.value = elem.value.substring(0, pos-!!(elem.value.length-pos-1)) + elem.value.substring(pos)
  elem.setSelectionRange(elem.value.length, pos-!!(elem.value.length-pos));
  elem.focus();
}

function moveBack() {
  var elem = document.getElementById('someText');
  elem.setSelectionRange(elem.value.length, getInputSelection(elem).start);
  elem.focus();
}

function getInputSelection(el) {
  var start = 0,
    end = 0,
    normalizedValue, range,
    textInputRange, len, endRange;
  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    start = el.selectionStart;
    end = el.selectionEnd;
  } else {
    range = document.selection.createRange();
    if (range && range.parentElement() == el) {
      len = el.value.length;
      normalizedValue = el.value.replace(/\r\n/g, "\n");
      textInputRange = el.createTextRange();
      textInputRange.moveToBookmark(range.getBookmark());
      endRange = el.createTextRange();
      endRange.collapse(false);
      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
        start = end = len;
      } else {
        start = -textInputRange.moveStart("character", -len);
        start += normalizedValue.slice(0, start).split("\n").length - 1;
        if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
          end = len;
        } else {
          end = -textInputRange.moveEnd("character", -len);
          end += normalizedValue.slice(0, end).split("\n").length - 1;
        }
      }
    }
  }
  return {
    start: start,
    end: end
  };
}

.inputUser {
  width: 55%;
  float: left;
  margin-top: 3%;
  border: 0px;
  overflow-x: scroll;
  text-align: left;
  border: 1px #000000 solid;
}

<input id="someText" class="inputUser" type="text" value="ABABABAB" readonly dir="rtl">

<div>
  <button onclick="setOne();">A</button>
  <button onclick="setTwo();">B</button>
  <button onclick="setBack();">Backspace</button>
  <button onclick="moveBack();">MoveBack</button>
</div>