清除輸入值只有

我有一個輸入像這樣：清除輸入值只有

<input type='text' id='mytext' name='mytext' value='Chocolate' />

是否有可能在#mytext:focus它將清除僅適用於CSS值。我知道我可以使用jQuery與$("#mytext").val("")做到這一點，但我只想用CSS來做到這一點。我不介意它是否僅在現代瀏覽器中受支持。

謝謝。

來源

2014-12-08 FirstLegion

使用placeholder，當你鍵入默認值會去和你的新值將出現在您鍵入

<input type='text' id='mytext' name='mytext' placeholder='Chocolate' />

來源

2014-12-08 05:14:44

我會打字到輸入框中，它需要清除任何可以通過點擊另一個輸入框中鍵入裝進盒子。 – FirstLegion 2014-12-08 05:17:18

這意味着你想清除它的兄弟姐妹的輸入值？ – 2014-12-08 05:19:01

我不認爲這是可能的'css' javascript或jquery會很好 – 2014-12-08 05:24:00

我不這麼認爲，可能只有CSS; 一個解決方案是使用Placeholder，它的樣式看起來像一個值。否則你可以試試這個;

Working Fiddle

<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />

樣式化的佔位符：

::-webkit-input-placeholder { 
    color: red; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: red; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: red; 
} 

:-ms-input-placeholder { 
    color: red; 
}

來源

2014-12-08 05:27:26

嘗試等;

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<p>Click on textbox.</p> 
<input type="text" onfocus="if(this.value == 'enter your name') { this.value = ''; }" value="enter your name" /> 
</body> 
</html>

或者你可以使用HTML5佔位符

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
input{ 
width: 390px; 
height: 30px; 
font-size: 14px; 
box-shadow: 0 0 5px; 
-webkit-box-shadow: 0 0 5px; /* for chrome & Safari browser */ 
-moz-box-shadow: 0 0 5px; /* for Mozilla web browser*/ 
border-style: none; 
margin-top: 5px; 
padding-left:10px; 
} 
</style> 
    <!-- include javascript file here--> 
    </head> 
    <body> 
    <div id="main"> 
    <!-- first div for form --> 
     <div id="first"> 
     <h1>Please fill this form and click reset button.</h1> 
     <p></p><hr/> 

     <form id="myform"> 
     <label> First name : </label></br> 
     <input type="text" id="fname" name="fname" placeholder="First Name"/><br><br>  
     </form> 
     </div> 

    </div> 

    </body> 
</html>

來源

2014-12-08 05:36:14

清除輸入值只有

回答

相關問題