设置占位符 JavaScript

在开发 Web 应用过程中，我们经常需要向用户收集数据。表单是 Web 应用开发中最常用的一种方法，但是，有时我们需要使用一些自定义的组件来实现更复杂的交互。在这种情况下，我们可能需要使用占位符。

占位符是一种输入框中的文本，用于提示用户输入的内容。它通常使用灰色字体显示，当用户开始输入时，它会自动消失。这个功能在 JavaScript 中非常容易实现，我们可以使用 HTML5 提供的 placeholder 属性来配置占位符。

HTML

让我们先看看如何在 HTML 中配置占位符。以下是基本的表单输入框：

<input type="text" name="username" placeholder="输入用户名">

在这个例子中，placeholder 属性告诉浏览器在输入框中显示的文本是“输入用户名”。

CSS 样式

占位符通常使用默认样式显示，但是，您可以通过 CSS 定制它的外观。以下是一些常用的 CSS 样式：

/* 改变占位符文本的颜色 */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #999;
}
:-ms-input-placeholder { /* IE */
  color: #999;
}
:-moz-placeholder { /* Firefox 18- */
  color: #999;
}

/* 改变占位符文本的字体 */
input::placeholder {
  font-size: 14px;
  font-weight: bold;
}

/* 修改占位符的背景颜色和边框 */
input[type=text]::placeholder {
  background-color: #fff;
  border: 1px solid #ccc;
}

JavaScript

有时，我们需要在用户输入内容之前改变占位符文本。在这种情况下，我们需要使用 JavaScript。以下是一个例子：

<input type="text" name="username" placeholder="输入用户名" id="username-input">
<button id="submit-btn">提交</button>

<script>
  const input = document.querySelector('#username-input');
  
  input.addEventListener('focus', () => {
    input.placeholder = '请输入您的用户名';
  });
  
  input.addEventListener('blur', () => {
    input.placeholder = '输入用户名';
  });

  const submitBtn = document.querySelector('#submit-btn');
  
  submitBtn.addEventListener('click', () => {
    const value = input.value;
    alert(`您的用户名是 ${value}`);
  });
</script>

在这个例子中，我们使用了 focus 和 blur 事件来改变占位符文本。当用户聚焦输入框时，占位符会被更改为“请输入您的用户名”；当用户取消输入框的焦点时，占位符会被恢复为“输入用户名”。当用户点击提交按钮时，我们使用 JavaScript 获取输入框中的值，并弹出一个对话框。

结论

占位符是让用户更容易理解应用程序的关键信息之一。在这个简要的介绍中，我们学习了如何在 HTML 中配置占位符、如何使用 CSS 样式自定义占位符的外观、以及如何使用 JavaScript 改变占位符文本。