CODEWITHSUNDEEP
javascripthtmlbuttononclickfocus
Jonny
Jonny

Reputation: 1329

Javascript onclick to act as a backspace button to delete the char before the caret

I Created a backspace button. At first it was set up like this. The backspace works only from the end of the string.

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

But I want the Backspace button to work where ever the carot position is not from just the end of the string so i came up with this. My question is how can i get this button to delete the char as it moves back and not only jump to the end of the string and delete. I created a duplicate of the button so you could scroll through the chars, but i want the backspace button to actually remove the char.

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>

No JQuery please. Thank you.

Upvotes: 1

Views: 1205

Answers (1)

Kosh
Kosh

Reputation: 18393

Try this:

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>

Upvotes: 1

Related Questions