Logo

菜单

发布于 2026-01-06 2 阅读
0

给你的表格增添一点趣味性

给你的表格增添一点趣味性

细节决定成败。最近，jhey.dev荣幸地入选了whimsical.club。这是一个“精选趣味网站列表”。

什么是奇思妙想？它指的是我们可以为项目增添的那一点点乐趣，让观众对我们有所了解，也是与观众建立联系的另一种方式。莎拉·德拉斯纳在最近的一篇文章中对此做了很好的总结。

“虽然我们都全神贯注于发布最新功能、最热门的软件和最佳的 Lighthouse 评分，但我却错过了网络上的些许乐趣。目前的应用程序很少关注用户体验、引导、丰富性，而且——嗯，对于试图通过计算机进行交流的人类来说，我们显然在向……计算机妥协。”

今天我们要添加一个功能，当用户提交表单时会喷洒彩带。当有人注册你的电子报时，这会让他们感到惊喜。这就是我使用它的目的。我已经添加了这个功能，你可以在jhey.dev上看到它的实际效果。

我们先从一个表格开始，一个非常基本的表格。例如，填写此表格将跳转到我的新闻简报订阅页面。

<form class="whimsy-form" action="https://www.getrevue.co/profile/jh3y/add_subscriber" method="post" target="_blank">
  <div class="whimsy-form__group">
    <label>Email address</label>
    <input type="email" required="true"/>
  </div>
  <div class="whimsy-form__actions">
    <input type="submit" value="Subscribe"/>
  </div>
</form>
Enter fullscreen mode Exit fullscreen mode

让我们更进一步，添加一些额外的标记和样式，让它更“友好”一些。这是我们用 Tailwind 框架快速搭建的一个表单。

目前看来还不错。你还可以通过文案增添一些“个性”。利用这些机会建立联系。“想保持联系吗？我想和你分享我的心得”听起来比“订阅我的电子报”要好得多。总之，这本身就是另一个话题了！

但是，我们想要彩带！

干草叉

让我们来学习一些 JavaScript 代码。我们将使用这个canvas-confetti包。它非常适合我们的使用场景。有很多方法可以获取它。我们可以用它skypack来做演示。您可能需要将其安装到您的项目中import。

import confetti from 'https://cdn.skypack.dev/canvas-confetti
Enter fullscreen mode Exit fullscreen mode

然后我们需要获取表单的提交按钮以及表单本身。

const FORM = document.querySelector('form')
const SUBMIT = FORM.querySelector('[type="submit"]')
Enter fullscreen mode Exit fullscreen mode

然后把彩带喷射和我们的表单提交联系起来。

FORM.addEventListener('submit', () => {
  confetti()
})
Enter fullscreen mode Exit fullscreen mode

嗯，这样确实可行，但效果却不尽如人意。首先，浏览器打开新标签页时，我们看不到彩带。等我们返回时，彩带就出现了，但它是从屏幕中央喷涌而出的。

我们来解决这个问题。我们需要阻止表单的默认操作发生。我们可以preventDefault监听相应的事件。然后，我们可以获取按钮的位置getBoundingClientRect。我们可以利用这个位置来确定彩带的发射位置。

import confetti from 'https://cdn.skypack.dev/canvas-confetti'
const FORM = document.querySelector("form")
const SUBMIT = FORM.querySelector('[type="submit"]')

const onSubmit = e => {
  e.preventDefault()
  const BOUNDS = SUBMIT.getBoundingClientRect()
  confetti({
    origin: {
      x: (BOUNDS.x + BOUNDS.width / 2) / window.innerWidth,
      y: (BOUNDS.y + BOUNDS.height / 2) / window.innerHeight,
    },
  })
}

FORM.addEventListener('submit', onSubmit)
Enter fullscreen mode Exit fullscreen mode

最后一步是在设定的延迟时间后提交表格。我们可以等到彩带散完，但大约一秒钟就足够了。

setTimeout(() => FORM.submit(), 1000)
Enter fullscreen mode Exit fullscreen mode

把所有内容整合起来。

import confetti from 'https://cdn.skypack.dev/canvas-confetti'
const FORM = document.querySelector("form")
const SUBMIT = FORM.querySelector('[type="submit"]')

const onSubmit = e => {
  e.preventDefault()
  const BOUNDS = SUBMIT.getBoundingClientRect()
  confetti({
    origin: {
      x: (BOUNDS.x + BOUNDS.width / 2) / window.innerWidth,
      y: (BOUNDS.y + BOUNDS.height / 2) / window.innerHeight,
    },
  })
  setTimeout(() => FORM.submit(), 1000)
}

FORM.addEventListener('submit', onSubmit)
Enter fullscreen mode Exit fullscreen mode

好耶！🎉 我们的表格设计有点小趣味。

建议仔细阅读相关文档canvas-confetti。您可以根据个人喜好调整设置，并获得不同的效果。其中一个需要注意的选项是[此处应填写选项名称] disableForReducedMotion。我建议将其设置为“true”，以便我们更好地照顾患有前庭功能障碍的用户。

confetti({
  disableForReducedMotion: true
})
Enter fullscreen mode Exit fullscreen mode

现在我们有了彩带，还可以更进一步，添加一些音频。audio在我们的标记中添加一个元素，并使用preload相应的属性。

<audio src="https://assets.codepen.io/605876/horn.mp3" preload="auto"></audio>
Enter fullscreen mode Exit fullscreen mode

使用此功能preload可确保在我们点击“订阅”按钮后，音频即可立即播放。

我们只需要将它与“onSubmit”函数关联起来。获取音频元素并使用“播放”方法。

const AUDIO = FORM.querySelector('audio')
// Then inside "onSubmit"
AUDIO.play()
Enter fullscreen mode Exit fullscreen mode

瞧，这就是我们最终呈现的效果。一个充满趣味的注册表单，它能给用户带来一丝愉悦，并在他们提交表单时留下深刻的印象。同时，您也能从中获得成就感，因为您为用户带来了一项小小的改进。即使用户禁用了 JavaScript，您的表单依然可以正常工作，只是缺少了这些花哨的功能。

我想大家可能也想要一个 React 版本。喏，给你！

＼ʕ •ᴥ•ʔ／

流程相同，但我们可以使用它useRef来获取元素引用。

就是这样！

给你的网站和应用增添一些乐趣的一个小技巧。不妨考虑将它与我们之前讨论过的其他一些方法结合起来。这样你就能为用户打造绝佳的体验。和往常一样，欢迎留言告诉我你的想法，我们下次再见！

保持精彩！ʕ •ᴥ•ʔ

文章来源：https://dev.to/jh3y/add-a-little-whimsy-to-your-forms-2c1f
将 Git 与 GitHub 和 ...
在 Visual Studio C...