JavaScript实现横线提示输入验证码随输入验证码输入消失的方法

要实现这个功能，我们需要用到JavaScript和CSS。

首先，我们需要在HTML页面中添加一个input标签来接受验证码输入，同时在输入框下面添加一个div标签来显示横线提示。例如：

<label for="code">请输入验证码：</label>
<input type="text" id="code" name="code">
<div id="code-line"></div>

接下来，我们需要用CSS来设置横线提示的样式。我们可以通过设置div标签的边框来实现这个效果。例如：

#code-line {
  border-bottom: 1px solid gray;
  margin-top: 5px;
  display: none;
}

这段代码中，我们设置了div标签的底边框为1像素的灰色实线。我们还将它的顶部margin设置为5像素，使它与输入框有一些距离。最后，我们将它的display属性设置为none，使它一开始隐藏起来，等待JavaScript动态显示。

接着，我们需要用JavaScript来实现横线提示的显示和隐藏。我们可以通过监听input标签的focus和blur事件来实现。例如：

const codeInput = document.getElementById('code');
const codeLine = document.getElementById('code-line');
codeInput.addEventListener('focus', () => {
  codeLine.style.display = 'block';
});
codeInput.addEventListener('blur', () => {
  codeLine.style.display = 'none';
});

这段代码中，我们首先获取了输入框和横线提示的元素。然后，我们分别监听了输入框的focus和blur事件。当输入框获得焦点时，我们将横线提示的display属性设置为block，使它显示出来；当输入框失去焦点时，我们将横线提示的display属性设置为none，使它隐藏起来。这样，当用户点击输入框时，横线提示就会自动显示出来；当用户离开输入框时，横线提示就会自动隐藏起来。

接下来，我们来看一下具体的实现效果示例。

示例一：横线提示一直显示

如果我们希望横线提示在输入框周围一直显示，这样可以让用户更加清晰地看到输入框的位置和范围，我们可以将JavaScript代码中的focus事件监听函数删掉。这样，当用户打开页面时，横线提示就会自动显示出来，并一直保持显示，直到用户关闭页面为止。

示例二：验证码输入正确才隐藏横线提示

如果我们希望横线提示在用户输入正确的验证码后，自动隐藏起来，这样可以让页面更加整洁，我们可以在输入框的输入事件中判断用户输入的值是否正确，如果正确，则隐藏横线提示。例如：

codeInput.addEventListener('input', () => {
  const code = codeInput.value;
  const codeLineStatus = code === '1234' ? 'none' : 'block';
  codeLine.style.display = codeLineStatus;
});

这段代码中，我们监听了输入框的input事件。当用户输入验证码时，我们获取输入框的值。然后，我们判断用户输入的值是否等于正确的验证码（这里我们假设正确的验证码是1234）。如果输入的值等于正确的验证码，则将横线提示的display属性设置为none，使它隐藏起来；否则，将横线提示的display属性设置为block，使它显示出来。

这样，当用户输入正确的验证码后，横线提示就会自动隐藏起来。如果用户输入错误的验证码，横线提示会一直显示。