sweetalert弹窗 输入备注描述

SweetAlert是一个轻量级的JavaScript库，用于创建美观且互动式的警告、确认和其他类型的提示窗口。如果你想在 SweetAlert 弹窗中添加输入备注的功能，你可以使用其提供的自定义功能。SweetAlert4库提供了一个`input`选项，允许用户在弹出框中输入文本。例如：

 Swal({
   title: '请输入备注',
   input: 'text', // 表示输入类型为文本
   inputPlaceholder: '请输入您的描述...', // 提示文字
   confirmButtonText: '确定', // 确定按钮的文字
   onOpen: function () {
      swal.showInputBox(); // 显示输入框
   },
   onConfirm: function (event) { // 当用户点击确定时触发
     console.log('用户输入:', event.input); // 获取用户输入的内容
   },
   onCancel: function () { // 如果用户取消输入
     console.log('取消操作');
   }
 });

相关问题

js alert弹窗美化

为了美化js alert弹窗，我们可以使用第三方插件或者自己编写样式来实现。以下是一些常用的方法：

1. SweetAlert2插件：这是一个非常流行的弹窗插件，可以轻松创建漂亮的弹窗效果。它支持多种类型的弹窗，包括警告、错误、成功、信息等等。你可以通过它的官网下载，并按照文档进行配置和使用。

2. 自定义样式：如果你不想使用第三方插件，也可以自己编写css样式，来美化alert弹窗。你可以通过修改弹窗的背景色、字体、边框、阴影等等，来实现你想要的效果。

以下是一个简单的例子，展示如何通过自定义样式来美化alert弹窗：

<style>
    .alert {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        padding: 20px;
        font-size: 16px;
        color: #333;
    }

    .btn-ok {
        background-color: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        margin-top: 10px;
        cursor: pointer;
    }
</style>

<script>
    function myAlert() {
        var msg = "Hello World!";
        var div = document.createElement('div');
        div.classList.add('alert');
        div.innerHTML = msg;
        var btn = document.createElement('button');
        btn.classList.add('btn-ok');
        btn.innerText = 'OK';
        btn.onclick = function() {
            div.parentNode.removeChild(div);
        }
        div.appendChild(btn);
        document.body.appendChild(div);
    }
</script>

<button onclick="myAlert()">Click me</button>

上面的代码会在点击按钮时，弹出一个自定义样式的alert弹窗，包含一条信息和一个确认按钮。你可以根据需要修改样式，来实现你想要的效果。

js sweetalert实现输入验证码并且判断输入的是否为111111

你可以使用 SweetAlert2 库中的 input 功能来实现输入验证码的弹窗，然后通过 preConfirm 函数来判断输入的验证码是否为 `111111`。下面是一个示例代码：

Swal.fire({
  title: '请输入验证码：',
  input: 'text',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: '确认',
  showLoaderOnConfirm: true,
  preConfirm: (code) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (code === '111111') {
          resolve()
        } else {
          Swal.showValidationMessage('验证码错误')
        }
      }, 1000)
    })
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.value) {
    Swal.fire({
      title: '验证码输入正确！',
      icon: 'success'
    })
  }
})

这段代码会弹出一个输入框，要求用户输入验证码，如果输入的验证码是 `111111`，则提示验证成功，否则提示验证失败。