jQuery 添加输入占位符 - Javascript

占位符是一种提示性文本，通常用于表单输入框。它们可以提供有关所需输入的信息，从而改善用户体验。

在这篇文章中，我们将介绍如何使用 jQuery 来添加占位符到输入框中。

使用 placeholder 属性

在 HTML5 中，可以使用 placeholder 属性来添加占位符。例如：

<input type="text" placeholder="请输入您的用户名">

但是，这种方法有一些缺陷。它不适用于旧版浏览器（如 IE9 及以下版本），并且对于一些自定义样式，可能需要额外的 CSS 样式。

使用 jQuery 插件

为了解决这些问题，可以使用 jQuery 插件来添加占位符。这里我们将介绍两个常用的插件。

插件一：jQuery Placeholder

jQuery Placeholder 插件可以为旧版浏览器添加占位符。该插件可以在 GitHub 上找到。

首先，您需要在页面中包含 jQuery 和 jQuery Placeholder 插件：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.3.1/jquery.placeholder.min.js"></script>

然后，您可以使用以下代码来为输入框添加占位符：

$('input').placeholder();

其中，input 可以替换为您要添加占位符的元素。如果您要同时为多个元素添加占位符，可以使用以下方法：

$('input, textarea').placeholder();

插件二：jquery-placeholder-js

另一个常用的 jQuery 插件是 jquery-placeholder-js。该插件提供了额外的 CSS 样式，可以轻松自定义占位符的样式。该插件可以在 GitHub 上找到。

首先，您需要在页面中包含 jQuery 和 jquery-placeholder-js 插件：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.3.1/jquery.placeholder.min.js"></script>

然后，您可以使用以下代码来为输入框添加占位符：

$('input').placeholder({
  customClass: 'my-placeholder'
});

其中，customClass 可以替换为您自定义的样式类名。

总结

通过使用 jQuery 插件，您可以轻松为输入框添加占位符，从而提高用户体验。在选择插件时，请根据您的需求和浏览器兼容性来选择适合您的插件。

参考资料

• jQuery Placeholder
• jquery-placeholder-js