У меня возникла проблема, когда пользователь выделяет весь свой ввод в теге, а затем при нажатии клавиши числа, чтобы обновить выбранный ввод, ввод не будет обновляться, если достигнут максимальный размер ввода (это происходит только тогда, когда пользователь выделяет все входное значение). В случае моего кода ниже тип ввода - это число с диапазоном 0-999, а максимальный размер ввода равен 3. Что может быть причиной этой проблемы?

Input.js :

table.rows[2].cells[1].innerHTML = "<input type=number id=input name=number min=0 max=999 value=>";

document.getElementById("input").addEventListener("input", processInput);

document.getElementById("input").onkeypress = function() {
   if (this.value.length == 3) {
      return false;
   } 
   if (event.charCode == 46 || event.charCode == 45) {
      event.preventDefault();
   }
};
0
nenur 25 Дек 2019 в 20:14

2 ответа

Лучший ответ

Похоже, ваша проблема - первый оператор if в этом обработчике onkeypress - если у вас есть 3 символа, обработка не происходит. К сожалению, установка максимального значения на числовом вводе не мешает пользователю вводить большее число (по крайней мере, не в Firefox), равно как и установка свойства maxlength не помогает. Тем не менее, я собрал некоторый JavaScript, который дает почти естественный ответ:

  • ввод дополнительных символов: они показываются мимолетно, но затем обрезаются
  • уменьшение меньше нуля: должно зажимать до нуля
  • обратный интервал должен позволять опустошать поле.

Вот оно:

<script type="text/javascript">
var input = document.querySelector("#input");
var min = parseInt(input.min);
var max = parseInt(input.max);

input.onkeypress = function(ev) {
  // I assume the OP has a good reason for ignoring
  // - and .
  if (ev.charCode == 46 || ev.charCode == 45) {
     ev.preventDefault();
     return;
  }
};
input.onkeyup = function(ev) {
  var current = parseInt(input.value);
  if (current == "") {
    return;
  }
  input.value = clamp(current);
}
function clamp(value) {
  if (isNaN(value)) {
    return "";
  }
  if (value >= min && value <= max) {
    return value;
  }
  if (value > max) {
    var str = value.toString();
    return str.substr(0, (max + "").length);
  }
  return min;
}
</script>

И, конечно, этот скрипт должен быть найден только после ввода, так как он предполагает, что ввод существует. Вам также может понадобиться изменить это в соответствии с потребностями нескольких входных данных, так как я сохранил переменные, такие как входные данные, и это минимальное / максимальное значения в глобальных переменных.

0
daf 25 Дек 2019 в 21:05

Когда использование выделяет весь ввод, длина все равно 3. Условие if (this.value.length == 3) { становится истинным, а ваша функция возвращает ложное.

Чтобы исправить это:

Вы можете использовать selectionStart и selectionEnd, чтобы проверить, выбрал ли пользователь текст.

document.getElementById("input").onkeypress = function() {
    var selectionLength = this.selectionEnd - this.selectionStart;
   if (this.value.length == 3 && selectionLength == 0) {
      return false;
   } 
   if (event.charCode == 46 || event.charCode == 45) {
      event.preventDefault();
   }
};

https://stackoverflow.com/a/41233895/6768965

https://jsfiddle.net/vbt6yosr/1/

-1
rupindr 25 Дек 2019 в 20:48
Спасибо, что написали это ... очень удобно!
 – 
daf
25 Дек 2019 в 21:06
Я пытаюсь определить местоположение (широта / долгота) с помощью GeoClue для Linux и интерфейса Python (пакет ls -l). документация для c почти соответствует приведенным здесь функциям api, но Я не уверен, какой "идентификатор рабочего стола" мне следует отправить ... любой допустимый файл python --version, который запрашивает приложение ?? Полный путь или уникальное имя ??
 – 
rupindr
25 Дек 2019 в 21:11
Обновление: мне удалось получить приблизительное местоположение, взаимодействуя с возвращаемым значением,
 – 
nenur
25 Дек 2019 в 22:12
Похоже, вы установили значение текстового поля как otherInvestorSubtype, которое предоставляется реквизитами. Таким образом, компонент (так что значение текстового поля) не обновляется при изменении значения текстового поля. Вам необходимо сохранить значение otherInvestorSubtype, предоставляемое props, в состоянии компонента InvestorType следующим образом, чтобы обновлять компонент InvestorType каждый раз, когда пользователь что-то вводит:
 – 
nenur
25 Дек 2019 в 22:18
Измените метод renderSelectOtherSubtype следующим образом:
 – 
daf
26 Дек 2019 в 23:28