Question

我有一个输入：

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

是否有可能在#mytext:focus上仅使用CSS清除值。我知道我可以使用jQuery与$("#mytext").val("")一起执行此操作但我想仅使用CSS执行此操作。如果只支持现代浏览器，我也不介意。

感谢。

Answer 1

尝试;

<!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>

Answer 2

使用placeholder，当您输入默认值时，您的新值将在您输入时显示

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

Answer 3

我认为只有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;  
}

仅使用CSS清除输入值

3 个答案: