查看表单时placeholder隐藏

在前端开发中，当你想要在表单元素如input、textarea等聚焦时显示占位符（placeholder），而在未聚焦时隐藏占位符，你可以利用CSS和JavaScript来实现这一效果。这里有一些建议：

1. **CSS**:
使用`:focus-within`伪类可以触发当元素内部有任何元素获得焦点时，改变其样式。例如：

   input[placeholder]:focus-within {
     /* 在获取焦点时，将占位符文本颜色改为黑色或其他显眼色 */
     color: black;
   }
   
   input[placeholder]:not(:focus):not(:hover) {
     /* 非聚焦状态下，将占位符文本颜色变淡或透明 */
     opacity: 0.5;
   }

2. **JavaScript (Optional)**:
如果需要更精确的控制，可以在JavaScript中监听`focus`和`blur`事件来调整占位符状态。例如：

   const inputs = document.querySelectorAll('input[placeholder]');
   
   inputs.forEach(input => {
     input.addEventListener('focus', () => {
       // 当输入聚焦时，显示占位符
       input.setAttribute('placeholder', '');
     });
     
     input.addEventListener('blur', () => {
       // 当输入失去焦点时，隐藏占位符
       input.setAttribute('placeholder', '请输入...');
     });
   });