使用 CSS 和 JavaScript 的自输入文本效果

在前端开发中，我们经常需要实现自输入文本效果，让用户输入时页面动态更新，以增强用户交互体验。本文将介绍如何使用 CSS 和 JavaScript 实现自输入文本效果。

实现效果

我们要实现的自输入文本效果如下图所示：

输入框中输入文字，下面的文本框会动态显示出输入的内容。如果没有输入任何内容，则默认显示 "Type something..."。

HTML 结构

我们的 HTML 结构非常简单，只需要一个输入框和一个文本框即可。

<div class="input-container">
  <input type="text" id="input-text" />
  <label for="input-text">Type something...</label>
</div>

<div class="output-container">
  <div id="output-text">Type something...</div>
</div>

其中，input 元素和 label 元素用于实现文本框的样式，id 分别为 "input-text" 和 "output-text"。我们将通过 JavaScript 来监听文本输入事件，实现自输入文本效果。

CSS 样式

为了实现自输入文本效果，我们需要为 input 元素和 label 元素设置一些样式，以使其变得更美观。以下是我们的 CSS 样式：

.input-container {
  position: relative;
  width: 100%;
  height: 60px;
}

input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 20px;
  padding: 10px 20px;
  background-color: transparent;
  z-index: 10;
}

label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: #999;
  font-size: 20px;
  line-height: 60px;
  padding: 10px 20px;
  z-index: 1;
  transition: all 0.3s ease;
}

input:focus + label {
  transform: translateY(-50%);
  font-size: 14px;
  color: #333;
}

.output-container {
  margin-top: 50px;
}

#output-text {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  text-align: center;
  width: 100%;
  height: 80px;
  line-height: 80px;
  border: 2px solid #333;
  transition: all 0.3s ease;
}

#output-text.default {
  font-size: 24px;
  color: #999;
}

上述样式中，我们为 input 元素和 label 元素设置了一些基本样式，包括宽度、高度、边框、背景色等。对于 label 元素，我们设置了 pointer-events: none，以避免输入文字时选中标签。我们还为 input:focus + label 设置了 transform 属性，使 label 元素在 input 元素获得焦点时移动到输入框的上方。

对于输出文本框，我们将其设置为居中显示的矩形框，字体颜色为黑色。我们还为其设置了一些过渡效果，以优化用户体验。当用户还没有输入任何内容时，输出文本框会显示 "Type something..."，字体颜色为灰色，字体大小减小。

JavaScript 实现

最后，我们需要用 JavaScript 实现自输入文本效果。我们需要监听 input 元素的输入事件，并将输入内容实时更新到 output 元素上。

以下是我们的 JavaScript 代码：

const input = document.getElementById('input-text');
const output = document.getElementById('output-text');

input.addEventListener('input', function() {
  const value = this.value;
  output.innerText = value === '' ? 'Type something...' : value;
  output.classList.toggle('default', value === '');
});

在上面的代码中，我们首先使用 getElementById 方法获取 input 和 output 元素，将其存储到变量 input 和 output 中。然后，我们使用 addEventListener 方法监听 input 元素的 input 事件。在回调函数中，我们获取用户输入的内容，并将其实时更新到 output 元素上。如果输入内容为空，我们将文本框内容更新为 "Type something..."，并将字体颜色改为灰色。

最后我们调用了 classList.toggle 方法来给 output 元素添加或删除 default 类名，根据用户输入内容的有无来改变文本框的字体大小。

到此，我们的自输入文本效果已经实现完毕。

总结

通过使用 CSS 和 JavaScript，我们可以实现自输入文本效果，提升用户交互体验。在此过程中，我们使用了一些基本的 CSS 属性和 JavaScript 方法，通过使用它们，我们可以实现更多有趣的前端界面效果，让我们的网站更加美观和互动。