Изменение типа данных у элементов со свойством contentEditable со строки на число

137

29 июня 2019, 12:20

Необходимо задать тип вводимых данных - число, но не срабатывает. Как исправить?

let pallets = document.getElementsByClassName('pallets'); 
for (let i = 0; i < pallets.length; i++) { 
  pallets[i].contentEditable = true; 
  if (pallets[i].innerHTML.length === 0) { 
    pallets[i].innerHTML = ' '; 
  } else { 
    pallets[i].innerHTML = parseInt(pallets[i].innerHTML) 
  } 
  console.log(typeof pallets[i].innerHTML) 
}

.pallets { 
  border: 1px solid black; 
  width: 250px; 
  height: 25px; 
}

<div class="pallets"></div> 
<div class="pallets">4</div> 
<div class="pallets">5</div>

Answer 1

У вас работает, но не совсем корректно и код надо запускать каждый раз после изменения полей. А вообще задача не такая простая как кажется на первый взгляд, например, кроме клавиатурного ввода необходимо учесть события вставки. Ниже код который позволяет ввести с клавиатуры только цифры.

$(".pallets").on("input", function(e) { 
  let val = $(this).html(); 
  if (val.match(/\D/)) { 
    let pos = getPos(this); 
    $(this).html(val.replace(/\D/g, "")); 
    setPos(this, pos - 1); 
  } 
}); 
 
function getPos(elem) { 
  elem.focus(); 
  let _range = document.getSelection().getRangeAt(0); 
  let range = _range.cloneRange(); 
  range.selectNodeContents(elem); 
  range.setEnd(_range.endContainer, _range.endOffset); 
  return range.toString().length; 
} 
 
function setPos(elem, pos) { 
  elem.focus(); 
  if (document.selection) { 
    let sel = document.selection.createRange(); 
    sel.moveStart('character', pos); 
    sel.select(); 
  } else { 
    let sel = window.getSelection(); 
    sel.collapse(elem.firstChild, pos); 
  } 
}

.pallets { 
  border: 1px solid black; 
  width: 250px; 
  height: 25px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="pallets" contentEditable></div> 
<div class="pallets" contentEditable>4</div> 
<div class="pallets" contentEditable>5</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Анимация перехода на другую страницу React

Пытаюсь сделать анимацию перехода на другую страницу следующим образом: Для начала я обернул в HashRouter мой контейнер, который меняется при...

145

javascript

Как выполнить функцию после нескольких AJAX ( количество ajax неизвестно )?

Как после получения ответов сервера от всех AJAX, запустить функцию? Количество AJAX запросов неизвестно, всегда может быть разнымНо нужно дождаться...

115

javascript