切換/選擇時隱藏 HTML 輸入框的文本值

Question

我正在嘗試復制此聯系表單的效果，如果用戶單擊或選擇輸入文本區域，該值將消失。

在這里搗鼓！！！

 function hidetext() { var x = document.getElementById("carea"); if (x.value.display === "none") { x.value.display = "block"; } else { x.value.display = "none"; } }

 <input onclick="hidetext()" type="text" name="your-name" value="What's your name?" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required name" id="carea" aria-required="true" aria-invalid="false"> <input onclick="hidetext()" type="email" name="your-email" value="Your fancy email address?" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email email" id="carea" aria-required="true" aria-invalid="false"> <input onclick="hidetext()" type="tel" name="tel-818" value="Your mobile phone number?" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel mob" id="carea" aria-required="true" aria-invalid="false"> <input onclick="hidetext()" type="text" name="text-510" value="Tell us about your project" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required msg" id="carea" aria-required="true" aria-invalid="false">

Answer 1

我只是在谷歌上搜索到這可以使用 CSS 來實現。

input:focus::placeholder {
  color: transparent;
}

Answer 2

您應該使用“占位符”屬性：

 document.querySelector('input').onfocus = function() { var ph = this.getAttribute('placeholder'); if(!ph) return; this.setAttribute('placeholder', ''); this.setAttribute('data-placeholder', ph); } document.querySelector('input').onblur = function() { var ph = this.getAttribute('data-placeholder'), val = this.value; if(!ph || val) return; this.setAttribute('placeholder', ph); }

 <input type="text" placeholder="What's your name?" >