javascript - 需要 javascript 帮助来添加类

Question

这是我的代码:

<form>
<input type="text" id="username" onblur="class();" name="username">
</form>
<script>
    function class() {
        var username = document.getElementById('username');
        if (username == "") {
            //Now here I want to add a class
        }
    }
</script>

现在我想在未给出用户名值时添加类。我怎样才能做到这一点？

Answer 1

您的代码的主要问题是:

• 您正在使用 class，其中需要 标识符，但您不能使用 class 作为标识符，因为它是保留字。

• 您获取的是用户名字段的元素，而不是其值。

听起来您想在 blur 事件上向失去焦点的元素添加一个类。如果是这样，只需对代码进行最少的更改，您就可以:

1. 为函数使用不同的名称，因为 function class() { ... } 无效，class 是保留字。

2. 将this传递到onblur中的函数中。

3. 为您的函数声明一个 elm 参数(无论您想要什么名称)。

4. 将类添加到 elm.classList(在现代浏览器上)或 element.className(以获得最大兼容性)。

示例:

function checkUserName(elm) {
  var username = elm.value; // Or ... this.value.trim();
  if (!username) {
    elm.className += " no-name";
  } else {
    elm.className = elm.className.replace(/\bno-name\b/, '');
  }
}

.no-name {
  background-color: yellow;
  border: 1px solid red;
}

<form>
  <input type="text" id="username" onblur="checkUserName(this);" name="username">
</form>

<小时/>

话虽如此，我根本不会使用老式的 onxyz 属性。相反，我会使用现代事件处理:

document.getElementById("username").addEventListener("blur", function(e) {
  var username = this.value; // Or ... this.value.trim();
  if (!username) {
    this.className += " no-name";
  } else {
    this.className = this.className.replace(/\bno-name\b/, '');
  }
}, false);

.no-name {
  background-color: yellow;
  border: 1px solid red;
}

<form>
  <input type="text" id="username" onblur="checkUserName(this);" name="username">
</form>