Javascript onclick, чтобы действовать в качестве кнопки возврата назад, чтобы удалить символ перед кареткой - PullRequest
Новая
       22

Javascript onclick, чтобы действовать в качестве кнопки возврата назад, чтобы удалить символ перед кареткой

0 голосов
/ 06 декабря 2018

Я создал кнопку возврата.Сначала это было настроено так.Клавиша Backspace работает только с конца строки. 

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, пожалуйста.Спасибо.

1 Ответ

0 голосов
/ 06 декабря 2018

Попробуйте это: 

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>
...