表示「通過電子郵件準備就緒時收到通知」的部分是相關文本。我在我的Wordpress網站上使用WP維護模式插件https://wordpress.org/plugins/wp-maintenance-mode/作爲此頁面。您可以在我的網站http://boasish.com上看到文本框。當我點擊它時，如何讓文本框中的文本消失？

<div class="subscribe_wrapper" style="min-height: 100px;"> 
    <form class="subscribe_form" novalidate="novalidate"> 
    <input type="text" placeholder="Get notified when it is ready via email" name="email" class="email_input" data-rule-required="true" data-rule-email="true" aria-required="true"> 
    <input type="submit" value="Submit"> 
    </form> 
</div>

.wrap form.subscribe_form input[type="text"] { 
    text-align: center; 
    font-family: 'Myriad Pro'; 
    height:42px 
    padding: 11px 10px 10px 0; 
    width: 388px; 
    padding-top: 16px 
}

來源

2014-09-23 k65

答案就在這裏的http：// stackoverflow.com/questions/13630229/onclick-in-css，否則你需要js。 – Cheery 2014-09-24 00:02:15

輸入的佔位符等於「Get notifications ...」的值。這是瀏覽器的默認行爲，當您開始輸入時會消失。見http://ux.stackexchange.com/questions/21299/removing-placeholder-text-on-focus – marty 2014-09-24 00:06:20

http://jsfiddle.net/b0umabmt/ – 2014-09-24 00:10:34

它屬於輸入元件的placeholder屬性。作爲一個純粹的CSS的解決方案，你可以在佔位符文本的顏色更改爲white當<input>得到:focus編輯：

.email_input:focus::-webkit-input-placeholder { /* WebKit browsers */ 
 
    color: white; 
 
} 
 
.email_input:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
 
    color: white; 
 
} 
 
.email_input:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ 
 
    color: white; 
 
} 
 
.email_input:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ 
 
    color: white; 
 
}

<input type="text" placeholder="Get notified when it is ready via email" name="email" class="email_input" data-rule-required="true" data-rule-email="true" aria-required="true">

來源

2014-09-24 00:08:23

更新

由Hashem Qolam提出了一個乾淨的CSS的解決方案，我好多了並且沒有影響。我誠實地沒有想到這種方法，但已經寫了我的答案的90％。我建議你一起去吧！

該文本框使用佔位符標記，該標記在用戶開始寫入時自動清除。我建議你這樣離開它，因爲它不是一個完全意想不到的行爲。大多數用戶習慣於在文字開始寫作或單擊字段時文本消失的情況。

不久之後，它作爲提醒或指針，它將在此字段中輸入什麼內容。

placeholder屬性指定描述輸入字段的預期值（例如一個樣本值或預期的格式的簡短描述）短提示。

在用戶輸入值之前，短提示顯示在輸入字段中。

注意：佔位符屬性適用於以下輸入類型：文本，搜索，url，tel，電子郵件和密碼。

如果你點擊的時候你還想清除它，你將不得不使用某種javascript。如果你可以直接以某種方式編輯插件，你可以添加這些的複選框：

的onfocus =「this.placeholder =‘’」
的onblur =「this.placeholder =「得到通知時它通過電子郵件」

如果您不能編輯插件，你將不得不做插入的行頁面上一些javascript，一些準備：

//Clear placeholder on focus; 
$('.subscribe_form .email_input').focus(function() 
{ 
    $(this).attr('placeholder', ''); 
}); 

//Restore the placeholder on blur (loss of focus) 
$('.subscribe_form .email_input').blur(function() 
{ 
    $(this).attr('placeholder', 'Get notified when its ready via email'); 
});

來源

2014-09-24 00:11:17 Peter

當我點擊它時，如何讓文本框中的文本消失？

回答

更新

相關問題