无法修改HTML时，为RoundCube登录表单添加Placeholder文本求助

嘿，我来帮你搞定这个问题！既然没法直接修改登录表单的HTML代码，用JavaScript添加原生placeholder属性是最靠谱的方案，完全适配RoundCube的皮肤自定义场景。

优先方案：JavaScript原生占位符 #

利用输入框的ID（rcmloginuser和rcmloginpwd），我们可以在页面加载完成后动态给它们添加占位符属性，效果和直接写在HTML里一模一样。

代码实现 #

// 确保DOM完全加载后再执行操作
document.addEventListener('DOMContentLoaded', function() {
  // 处理用户名输入框
  const usernameField = document.getElementById('rcmloginuser');
  if (usernameField) {
    usernameField.setAttribute('placeholder', 'username');
  }

  // 处理密码输入框
  const passwordField = document.getElementById('rcmloginpwd');
  if (passwordField) {
    passwordField.setAttribute('placeholder', 'password');
  }
});

使用方法 #

把这段代码放到你的RoundCube皮肤目录下的自定义JS文件里（比如skin.js，如果没有可以新建一个），或者在皮肤的登录页面模板片段中注入这段脚本。页面加载后，输入框就会自动显示你设置的占位符了。

备选方案：CSS模拟占位符 #

如果你因为某些原因没法用JS，也可以用CSS模拟占位符效果（注意这不是原生的placeholder，只是视觉上的模拟）：

/* 先给输入框容器加相对定位，确保模拟占位符位置正确 */
.input {
  position: relative;
}

/* 用户名输入框模拟占位符 */
tr:first-child .input input:not(:focus):not(:valid) + .placeholder {
  display: block;
}
tr:first-child .input .placeholder {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  content: "username";
}

/* 密码输入框模拟占位符 */
tr:nth-child(2) .input input:not(:focus):not(:valid) + .placeholder {
  display: block;
}
tr:nth-child(2) .input .placeholder {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  content: "password";
}

不过这个方案需要你给每个输入框后面加一个空的.placeholder元素，而且对屏幕阅读器的支持不如原生占位符，所以优先推荐JS方案。

内容的提问来源于stack exchange，提问作者Michael Rooks