当我们将鼠标悬停在输入类型文本上时如何显示占位符答案

【问题标题】：How to show placeholder when we hover on input type text当我们将鼠标悬停在输入类型文本上时如何显示占位符
【发布时间】：2019-06-15 21:58:37
【问题描述】：

当我们将鼠标悬停在文本框上时，我希望占位符可见。

  <input type="text" placeholder="enter your name"/>

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

目前无法将功能内置到浏览器中，但通过一个小技巧，这是可能的：

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: transparent;
}
::-moz-placeholder { /* Firefox 19+ */
  color: transparent;
}
:-ms-input-placeholder { /* IE 10+ */
  color: transparent;
}
:-moz-placeholder { /* Firefox 18- */
  color: transparent;
}
:hover::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #999;
}
:hover::-moz-placeholder { /* Firefox 19+ */
  color: #999;
}
:hover:-ms-input-placeholder { /* IE 10+ */
  color: #999;
}
:hover:-moz-placeholder { /* Firefox 18- */
  color: #999;
}

&lt;input type="text" placeholder="Enter your name" /&gt;

还要注意浏览器的兼容性。

【讨论】：

【解决方案2】：

这就是我使用 javascript 所做的。希望它是您正在寻找的：

假设你的文本框的 id 设置为“输入”，那么

input = document.getElementById('input');

function ph () {
    input.setAttribute('placeholder','enter your name');
};

function phr () {
    input.setAttribute('placeholder', '');
};

input.addEventListener("mouseover", ph);
input.addEventListener("mouseout", phr);

【讨论】：

JavaScript 对于这个小东西来说太夸张了。只是提醒一下。
是的，我明白了。只需添加一个替代方案:)
祝您有美好的一天！ :)