資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 在獲得焦點時清空一個輸入欄位？
要清空輸入欄位，首先建立一個輸入欄位。要清空，請使用 onfocus 屬性。讓我們看兩個示例。
建立輸入欄位
首先，使用輸入型別在網頁表單中建立輸入欄位 -
<input type="text" value="Some random text...">
聚焦時清空輸入欄位
要清空輸入欄位，請使用 onfocus 屬性。
<input type="text" onfocus="this.value=''" value="Some random text...">
在獲得焦點時清空輸入欄位
以下是在獲得焦點時清空輸入欄位的程式碼 -
<!DOCTYPE html> <html> <body> <h1>Clearing an input field on focus example</h1> <input type="text" onfocus="this.value=''" value="Some random text..."> <p>Click on the above field to clear its value</p> </body> </html>
清空輸入欄位
讓我們看一個帶有多個輸入欄位的示例。對於所有這些，我們都使用了 onfocus 屬性 -
示例
<!DOCTYPE html>
<html>
<head>
<style>
input {
margin: 2%;
width: 100%;
}
div {
display: flex;
flex-direction: column;
margin: 3%;
padding: 3%;
text-align: center;
align-items: center;
box-shadow: inset 0 0 30px brown;
}
button {
width: 40%;
}
</style>
</head>
<body>
<div>
<input type="text" onfocus="this.value=''" value="Enter Username"/>
<input type="email" onfocus="this.value=''" value="somenone@somewhere.com" />
<button>Submit</button>
</div>
</body>
</html>
更新日期： 2023 年 11 月 16 日
1K+ 瀏覽量
廣告