数据结构
网络
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="[email protected]" />
<button>Submit</button>
</div>
</body>
</html>
更新日期： 2023 年 11 月 16 日
1K+ 浏览量
广告