如何禁用数字输入框中的箭头?

cssweb developmentfront end technology更新于 2024/11/12 10:20:17

在本文中，我们将学习如何通过两种不同的方法禁用和隐藏数字类型输入框中的箭头:一种是使用 CSS，另一种是使用"inputmode"属性。

当我们只想让用户输入数字时，数字类型输入框非常有用，例如年龄、身高、体重等。默认情况下，浏览器会在数字类型输入框中显示箭头，以便我们更改(增加或减少)输入框中的值。

让我们通过一些示例来了解如何实现上述功能。

示例 1

在本例中，我们将使用 HTML readonly 属性禁用数字输入框中的箭头。在这里，我们将使用 CSS ::-webkit-outer-spin-button 和 ::-webkit-inner-spin-button 伪元素来移除默认箭头。通过应用 appearance: none; 样式，我们可以有效地禁用数字输入中的箭头。

文件名:index.html

<html lang="en">
<head>
   <title>How to disable arrows from Number input?</title>
   <style>
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
         -webkit-appearance: none;
      }
   </style>
</head>
<body>
   <h3>How to disable arrows from Number input?</h3>
   <!-- Method 1: Using HTML readonly attribute -->
   <input type="number" placeholder="Enter a number here" readonly />

</body>
</html>

示例 2

在此示例中，我们将使用 JavaScript 事件处理程序来禁用数字输入中的箭头键。在这里，我们将使用 JavaScript 事件处理程序来阻止 keydown 和滚轮事件的默认行为。通过从这些事件处理程序返回 false，我们将禁用箭头键和鼠标滚轮修改数字输入值。

文件名:index.html

<html lang="en">
<head>
   <title>How to disable arrows from Number input?</title>
</head>
<body>
   <h3>How to disable arrows from Number input?</h3>
   <!-- Method 2: JavaScript event handlers -->
   <input type="number" placeholder="Enter a number here" onkeydown="return false" onwheel="return false" />

</body>
</html>

示例 3

在本例中，我们将使用 CSS 的"appearance"属性来禁用数字输入框中的箭头。在这里，我们将使用 CSS 的 appearance 属性来控制数字输入框的外观。通过为输入框分配自定义类并应用适当的样式，我们可以达到隐藏箭头的预期效果。

文件名:index.html

<html lang="en">
<head>
   <title>How to disable arrows from Number input?</title>
   <style>
      .no-spinners {
         -moz-appearance: textfield;
      }
      
      .no-spinners::-webkit-outer-spin-button,
      .no-spinners::-webkit-inner-spin-button {
         -webkit-appearance: none;
         margin: 0;
      }
   </style>
</head>
<body>
   <h3>How to disable arrows from Number input?</h3>
   <!-- Method 3: CSS "appearance" property -->

   <input type="number" placeholder="Enter a number here" class="no-spinners" />

</body>
</html>

结论

总而言之，我们探索了三种不同的方法来禁用和隐藏数字类型输入字段中的箭头，包括使用 CSS appearance 属性和伪元素(例如 ::-webkit-outer-spin-button 和 ::-webkit-inner-spin-button)、HTML readonly 属性以及 JavaScript 事件处理程序(例如监听 keydown 和 wheel 事件)。这些方法提供了根据特定需求自定义数字输入的外观和行为的选项。每种方法都提供了不同的途径来实现相同的结果，允许开发者选择最适合其项目需求和编码偏好的方法。