JS实现输入框提示文字点击时消失效果

JS实现输入框提示文字点击时消失效果，可以使用以下步骤实现：

1. 添加HTML代码
   在HTML中添加一个输入框，并为其添加placeholder属性，这样可以为输入框添加提示文字。例如：

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

1. 添加CSS样式
   为了美化输入框，我们可以使用CSS样式来调整样式。例如：

input[type=text] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

1. 添加JS代码
   为了让输入框文字消失，我们需要使用JS来实现。第一种方法是在输入框获取焦点时清空其placeholder属性，第二种方法是在输入框获取焦点时隐藏placeholder文字。以下是两种方法的示例代码：

方法一：清空placeholder属性

document.querySelector('input').addEventListener('focus', function() {
  this.placeholder = '';
});

方法二：隐藏placeholder文字

document.querySelector('input').addEventListener('focus', function() {
  this.setAttribute('data-placeholder', this.placeholder);
  this.placeholder = '';
});

document.querySelector('input').addEventListener('blur', function() {
  this.placeholder = this.getAttribute('data-placeholder');
});

在示例中，我们使用addEventListener方法来为输入框添加事件监听器。当获取到焦点时，我们需要清空placeholder属性或隐藏placeholder文字。当失去焦点时，我们需要重新设置placeholder属性或显示placeholder文字。

上面的示例可以让你更好地了解如何实现输入框提示文字点击时消失效果，你可以自由地根据实际需要进行修改。