Как ограничить значение поля ввода определенным числом - PullRequest
Новая
       11

Как ограничить значение поля ввода определенным числом

0 голосов
/ 02 апреля 2019

У меня есть HTML-таблица, внутри которой у меня есть столбец AcceptedQty, который является полем ввода

Всего у меня есть 5 столбцов Code, Item Name, unitcode, Quantity и AcceptedQty два из них Quantity и AcceptedQty имеют одинаковые значения, но AcceptedQty является полем ввода, поэтому пользователь может ввести любое число внутри него, и я сделал этот тип = "число", чтобы вводить только цифры

Что я пытаюсь сделать

  • , когда пользователь вводит любое число в поле ввода, это не должно позволять ему вводить большее число в соответствующее количество
  • предположим, дляcode 1326 Quantity равно 3, поэтому при редактировании AcceptedQty я хочу ограничить пользователя, чтобы он не вводил число больше 3
  • здесь у меня есть таблица HTML и так много строк, поэтому найти ее сложноdo

Фрагмент 

var tableDataDraft = [{
    "Code": "1326",
    "Item Name": "PINEAPPLE KG",
    "unitcode": "NOS",
    "Quantity": "3.0000",
    "AcceptedQty": "3.0000"
  },
  {
    "Code": "1494",
    "Item Name": "2D CAKE CHARGES PER KG",
    "unitcode": "NOS",
    "Quantity": "3.0000",
    "AcceptedQty": "3.0000"
  }
]

function addTableDraft(tableDataDraft) {
  var col = Object.keys(tableDataDraft[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1);
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableDataDraft.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input"); //creating input field hidden
      hiddenField.style.display = "none";
      var tabledata = tableDataDraft[i][col[j]];
      if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { //now setting html attributes
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['unitcode'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Unit_code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (col[j] === 'Quantity') {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Quantity');
        tabCell.appendChild(hiddenField);
      }
      if (col[j] === 'AcceptedQty') {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "right";
        quantityField.setAttribute("name", "AcceptedQty");
        quantityField.setAttribute("autocomplete", "on");
        quantityField.setAttribute("value", tabledata);
        quantityField.setAttribute("type", "number");
        quantityField.setAttribute("required", "required");
        quantityField.classList.add("dataReset");
        quantityField.toLocaleString('en-IN');
        tabCell.appendChild(quantityField);
      }

      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("table");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
addTableDraft(tableDataDraft)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<div class="table-responsive" id="commonDvScroll">
  <table id=table></table>
</div>

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

и я сделал это type = "tel" для ввода только цифр

Используйте type="number" ("tel" - это номер телефона ) иmin и max атрибуты (и отраженные свойства) HTMLInputElement (и step, если вы не хотите дробных значений).Вероятно, также имеется обработчик input для обработки браузеров без полевых функций HTML5.

См. *** закомментированные строки: 

var tableDataDraft = [{
    "Code": "1326",
    "Item Name": "PINEAPPLE KG",
    "unitcode": "NOS",
    "Quantity": "3.0000",
    "AcceptedQty": "3.0000"
  },
  {
    "Code": "1494",
    "Item Name": "2D CAKE CHARGES PER KG",
    "unitcode": "NOS",
    "Quantity": "3.0000",
    "AcceptedQty": "3.0000"
  }
]

function addTableDraft(tableDataDraft) {
  var col = Object.keys(tableDataDraft[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1);
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableDataDraft.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input"); //creating input field hidden
      hiddenField.style.display = "none";
      var tablerow = tableDataDraft[i]; // ***
      var tabledata = tablerow[col[j]]; // ***
      if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { //now setting html attributes
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['unitcode'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Unit_code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (col[j] === 'Quantity') {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Quantity');
        tabCell.appendChild(hiddenField);
      }
      if (col[j] === 'AcceptedQty') {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "right";
        quantityField.setAttribute("name", "AcceptedQty");
        quantityField.setAttribute("autocomplete", "on");
        quantityField.setAttribute("value", tabledata);
        quantityField.setAttribute("type", "number");
        quantityField.min = 0;                 // ***
        quantityField.max = tablerow.Quantity; // ***
        quantityField.setAttribute("required", "required");
        quantityField.classList.add("dataReset");
        quantityField.toLocaleString('en-IN');
        tabCell.appendChild(quantityField);
      }

      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("table");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
addTableDraft(tableDataDraft)
input:invalid {
  color: #d00;
  border: 1px solid #d00 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<div class="table-responsive" id="commonDvScroll">
  <table id=table></table>
</div>

Обратите внимание, что пользователь все еще сможет ввести большее число, но форма не будет подтверждена.См. этот урок в MDN.

0 голосов
/ 02 апреля 2019

Как упоминалось @TJ Crowder, используйте тип ввода number

Этот тип ввода позволяет вам установить значение max, основанное на значении предыдущих столбцов

Кроме того, вы захотите добавить прослушиватель событий на вход, чтобы «прослушивать» / обнаруживать изменения на входе, чтобы вы могли воздействовать на любые изменения, ограничивая входное значение по своему усмотрению 

var tableDataDraft = [{
    "Code": "1326",
    "Item Name": "PINEAPPLE KG",
    "unitcode": "NOS",
    "Quantity": "3.0000",
    "AcceptedQty": "3.0000"
  },
  {
    "Code": "1494",
    "Item Name": "2D CAKE CHARGES PER KG",
    "unitcode": "NOS",
    "Quantity": "3.0000",
    "AcceptedQty": "3.0000"
  }
]

function addTableDraft(tableDataDraft) {
  var col = Object.keys(tableDataDraft[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1);
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");
    th.innerHTML = col[i];
    tr.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableDataDraft.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input"); //creating input field hidden
      hiddenField.style.display = "none";
      var tabledata = tableDataDraft[i][col[j]];
      if (tableDataDraft[i]['Code'] === tableDataDraft[i][col[j]]) { //now setting html attributes
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['Item Name'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableDataDraft[i]['unitcode'] === tableDataDraft[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Unit_code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (col[j] === 'Quantity') {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Quantity');
        tabCell.appendChild(hiddenField);
      }
      if (col[j] === 'AcceptedQty') {
        var quantityField = document.createElement("input");
        quantityField.style.border = "none";
        quantityField.style["text-align"] = "right";
        quantityField.setAttribute("name", "AcceptedQty");
        quantityField.setAttribute("autocomplete", "on");
        quantityField.setAttribute("value", tabledata);
        quantityField.setAttribute("type", "number");
        quantityField.setAttribute("required", "required");
        quantityField.setAttribute("max", parseInt(tableDataDraft[i]["Quantity"]));
        quantityField.setAttribute("min", 0);
        quantityField.setAttribute("step", 0.1);


        quantityField.addEventListener("change", function() {
          let max = parseFloat(this.getAttribute('max'));
          let min = parseFloat(this.getAttribute('min'));
          let val = parseFloat(this.value)
          val = val > max ? max : val;
          val = val < min ? min : val;
          if (val != this.value) {
            alert("Input is incorrect");
            this.focus();
          }
          this.value = val;

        });
        quantityField.setAttribute("min", 0);

        quantityField.classList.add("dataReset");
        quantityField.toLocaleString('en-IN');
        tabCell.appendChild(quantityField);
      }

      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("table");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
addTableDraft(tableDataDraft)
input:invalid {
  outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<div class="table-responsive" id="commonDvScroll">
  <table id=table></table>
</div>
...