HTML 输入类型数字最小值和最大值属性在 IE 中不起作用答案

【问题标题】：HTML input type number min & max attributes not working in IEHTML 输入类型数字最小值和最大值属性在 IE 中不起作用
【发布时间】：2016-07-24 05:56:11
【问题描述】：

我在 HTML 中创建了一个表格，并为每个数字输入字段设置了最小和最大范围。当我在最新版本的 Chrome 和 Firefox 中运行演示时，我看到最右边的小增量和减量箭头。但是当我在 IE 中运行相同的应用程序时，向上和向下箭头不显示。

我的问题是：有没有办法让它在 IE 中显示，或者，现在还没有支持吗？

提前致谢。

body {
    font-family: 'Segoe UI', sans-serif;
}

span {
    font-style: italic;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>My first input test</title>
  <link rel="stylesheet" href="app.css" type="text/css" />
</head>

<body>
  <h1>Hello World!</h1>
  <table class="table table-striped table-hover table-bordered" id="PatientTrackingBoardTable" border="1">
    <thead>
      <tr>
        <th class="TopRow">Inventory</th>
        <th class="TopRow">Qty</th>
      </tr>
    </thead>

    <tr class="SubRow">
      <td class="InventoryRow" style="width:75%">Chairs</td>
      <td class="QtyAvailableCell">
        <input id="ChairsAvailable" type="number" class="BedInputField" min="0" max="100" />
      </td>
    </tr>
    <tr class="SubRow">
      <td class="InventoryRow">Tables</td>
      <td class="QtyAvailableCell">
        <input id="TablesAvailable" type="number" class="BedInputField" min="0" max="100" />
      </td>
    </tr>
  </table>
</body>

</html>

【问题讨论】：

标签： javascript jquery html internet-explorer

【解决方案1】：

IE 10 和 11 都允许输入类型：数字 - 但您无法获得 UI 微调器按钮。

【讨论】：

【解决方案2】：

在 IE 中需要使用 JavaScript 或 jQuery 来做这种改变。

$(function () {
  $("input").keydown(function () {
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
    $(this).data("old", $(this).val());
  });
  $("input").keyup(function () {
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
      ;
    else
      $(this).val($(this).data("old"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="0" max="11" value="0"/>

希望这会有所帮助。

【讨论】：