после фильтрации ввода в contenteditable / input, чтобы поместить каретку туда, где она была - PullRequest
Новая
       44

после фильтрации ввода в contenteditable / input, чтобы поместить каретку туда, где она была

0 голосов
/ 07 мая 2018

У меня есть contenteditable элемент, который я обновляю / фильтрую с помощью javascript. После обновления текстового содержимого каретка всегда возвращается к началу. Хочется заставить работать как элемент ввода. Я настроил демо :

  1. test1 - contenteditable element
  2. test2 - элемент ввода

В этом примере у меня есть функция, которая позволяет вставлять только цифры, если вы вставляете другие символы, ничего не будет отображаться.

После ввода некоторых чисел в contenteditable и вставки номера NOT, курсор (каретка) переходит в начало. В случае элемента ввода курсор уходит в конец.

Как этого добиться, чтобы курсор остался на том месте, где он был? (чистый JavaScript) 

function onlyNumber(element) {
  const invalidChars = /\D/g;
  ob = element.target;
  if (element.target.nodeName == "INPUT") {
    if (invalidChars.test(ob.value)) {
      ob.value = ob.value.replace(invalidChars, "");
    }
  } else if (element.target.nodeName == "TD") {
    if (invalidChars.test(ob.textContent)) {
      ob.textContent = ob.textContent.replace(invalidChars, "");
    }
  }
}

document.getElementById("test1").addEventListener("input", function(event) {
  onlyNumber(event);
})
document.getElementById("test2").addEventListener("input", function(event) {
  onlyNumber(event);
})
#test1 {
  border: 1px solid gray;
  padding: 5px;
  width: 100px;
}

#test2 {
  margin-top: 15px;
}
<table class="table">
  <tbody>
    <tr>
      <td id="test1" contenteditable="true"></td>
    </tr>
  </tbody>
</table>
<input id="test2" />

1 Ответ

0 голосов
/ 07 мая 2018

Вы можете использовать событие keydown и запретить все, кроме цифр и стрелок / delete / backspace.

Фрагмент стека 

function onlyNumber(element) {
  const invalidChars = /\D/g;
  ob = element.target;
  if (element.target.nodeName == "INPUT") {
    if (invalidChars.test(ob.value)) {
      ob.value = ob.value.replace(invalidChars, "");
    }
  } else if (element.target.nodeName == "TD") {
    if (invalidChars.test(ob.textContent)) {
      ob.textContent = ob.textContent.replace(invalidChars, "");
    }
  }
}

document.getElementById("test1").addEventListener("keydown", function(event) {
  if ((event.keyCode < 58 && event.keyCode > 47) ||
      (event.keyCode < 41 && event.keyCode > 36) ||
      event.keyCode == 8 || event.keyCode == 46) {
    return true;
  }
  event.preventDefault();
})
document.getElementById("test2").addEventListener("input", function(event) {
  onlyNumber(event);
})
#test1 {
  border: 1px solid gray;
  padding: 5px;
  width: 100px;
}

#test2 {
  margin-top: 15px;
}
<table class="table">
  <tbody>
    <tr>
      <td id="test1" contenteditable="true"></td>
    </tr>
  </tbody>
</table>
<input id="test2" />

Другим вариантом будет изменение положения курсора:

...