input 获取焦点时 placeholder文字上移
时间: 2024-09-28 18:07:52 浏览: 38
当你在一个输入框 (`input` 元素) 中设置 `placeholder` 属性,并希望当这个元素获取到焦点时,提示文字(也就是 `placeholder` 的内容)自动消失并让输入区域本身获得焦点显示,你可以这样做:
1. 首先,在HTML中创建一个 `input` 输入框,并设置 `placeholder` 文字:
```html
<input type="text" id="myInput" placeholder="请输入内容">
```
2. 然后,在CSS中,可以添加一些样式,以便在获取焦点时改变 `placeholder` 的行为:
```css
/* 通常情况下,placeholder默认会在失去焦点时显示 */
input {
/* 添加下面这行会使placeholder在聚焦时不显示 */
-webkit-input-placeholder: ""; /* WebKit browsers (Safari, Chrome 53+) */
-moz-placeholder: ""; /* Mozilla Firefox 4 to 18 */
-ms-input-placeholder: ""; /* Internet Explorer 10+ */
/* or just use this for modern browsers */
placeholder: "";
}
/* 当输入框获得焦点时 */
input:focus {
/* 清除提示文字,placeholder属性不起作用 */
-webkit-input-placeholder: none;
-moz-placeholder: none;
-ms-input-placeholder: none;
placeholder: none;
}
```
3. JavaScript部分,虽然现代浏览器通常不需要额外脚本处理这个问题,但如果需要在某些特定条件下动态操作,也可以考虑使用JavaScript。不过在这种情况下,JavaScript的作用已经相当有限了。
阅读全文