正文

新手必看：轻松掌握Bootstrap表单小数输入技巧与实例

/0 浏览量
0402

在网页设计中，表单是用户与网站交互的重要方式。而小数输入是表单中常见的需求，Bootstrap 作为一款流行的前端框架，提供了丰富的工具和组件来帮助我们快速构建响应式网页。本文将详细介绍如何使用 Bootstrap 来实现表单小数输入，并提供实例代码供您参考。

Bootstrap 表单小数输入概述

Bootstrap 提供了多种表单输入控件，如文本框、密码框、选择框等。要实现小数输入，我们可以利用 input 元素和 type="number" 属性，并结合 Bootstrap 的样式类来实现。

实现步骤

1. 创建 HTML 结构

首先，我们需要创建一个基本的 HTML 结构，包括一个表单元素和一个小数输入框。

<form>
  <div class="form-group">
    <label for="decimalInput">小数输入</label>
    <input type="number" class="form-control" id="decimalInput" placeholder="请输入小数">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

2. 应用 Bootstrap 样式

接下来，我们需要引入 Bootstrap 的 CSS 文件，并应用相应的样式类。这里我们使用 form-control 类来美化输入框。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

3. 实现小数输入

在默认情况下，type="number" 的输入框只能输入整数。为了实现小数输入，我们可以通过自定义 JavaScript 代码来限制输入。

<script>
  function decimalInput(event) {
    var key = event.keyCode || event.which;
    if (key !== 8 && key !== 0 && (key < 48 || key > 57) && key !== 46) {
      event.preventDefault();
    }
    if (key === 46 && $(this).val().indexOf('.') !== -1) {
      event.preventDefault();
    }
  }

  $('#decimalInput').on('keydown', decimalInput);
</script>

这段代码通过监听输入框的 keydown 事件，判断按键是否为数字、小数点或退格键，从而实现小数输入。

实例代码

以下是一个完整的实例，包括 HTML、CSS 和 JavaScript 代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 小数输入示例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script>
    function decimalInput(event) {
      var key = event.keyCode || event.which;
      if (key !== 8 && key !== 0 && (key < 48 || key > 57) && key !== 46) {
        event.preventDefault();
      }
      if (key === 46 && $(this).val().indexOf('.') !== -1) {
        event.preventDefault();
      }
    }

    $('#decimalInput').on('keydown', decimalInput);
  </script>
</head>
<body>
  <form>
    <div class="form-group">
      <label for="decimalInput">小数输入</label>
      <input type="number" class="form-control" id="decimalInput" placeholder="请输入小数">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</body>
</html>

总结

通过以上步骤，我们可以轻松地使用 Bootstrap 实现表单小数输入。在实际开发中，您可以根据具体需求调整代码，以满足不同的业务场景。希望本文能对您有所帮助！

-- 展开阅读全文 --