jQuery Label Better 优雅的表单输入框提示插件

发布于 2020-03-24 10:46:00 字数 2413 浏览 1889 评论 0

jQuery Label Better 帮助你标记您的表单输入域，带有美丽的动画效果而且不占用空间。这个插件的独特之处在于所有你需要做的就是添加一个占位符文本，只有当用户需要它的时候才显示标签。

插件的工作原理非常简单，插件检测 input 字段的状态，当发现 input 字段被聚焦时，插件将用占位文字产生一个新的 div，然后使用 css3 使其向上运动。当 input 字段失去焦点时，插件就会检查 input 的内容，如果发现它是空的，那么就将原来占位文字放回去。

基本用法

要将其添加到您的网站，只需将最新的 jQuery 库与 jquery.label_better.js 文档一起包含到您的网站中 <head>，并只需调用以下函数即可：

$("input.label_better").label_better({
  position: "top",
  animationTime: 500,
  easing: "ease-in-out",
  offset: 20,
  hidePlaceholderOnFocus: true
});

可选参数

position

这将使您定义当用户单击输入字段时标签将出现的位置。可接受的选项是 top、bottom、left 和 right. 默认值 top。

animationTime

这将让您控制标签显示时的动画速度。此选项接受以毫秒为单位的值。默认值是 500。

easing

通过此选项，您可以定义希望对标签进行动画处理的CSS缓动。该选项接受所有默认的CSS缓动，例如 linear、ease 等。另一个可以使用的附加选项是 bounce。默认值为 ease-in-out。

offset

您可以在输入和标签之间添加更多间距。此选项接受以像素为单位的值（不包含单位）。默认值为 20。

hidePlaceholderOnFocus

默认的占位符文本将隐藏在焦点上。

HTML 属性

使用此插件，您可以使用标记来覆盖上面函数中定义的全局选项。您可以根据自己的喜好使用以下所有标记：

data-position

该标记使您可以分别定义每个输入字段的位置。

<input type="text" class="label_better" data-position="top" placeholder="Username">
<input type="text" class="label_better" data-position="right" placeholder="Email Address">

data-new-placeholder

有时您可能希望占位符文本与标签文本不同。您可以通过如下定义新的占位符文本来做到这一点，并且该值将显示为标签。

<input type="text" class="label_better" data-new-placeholder="Type your username" placeholder="Username">
<input type="text" class="label_better" data-new-placeholder="Type your email address" placeholder="Email Address">

这就是 Label Better 插件的全部内容。敬请期待更多的更新。