javascript - 当用户在文本框中输入文本然后附加前缀值

Question

我有一个需要填写网站 URL 的文本框。因此，当用户将光标放在文本框中时，文本框应预填充“http://”(不是占位符)。

如果用户未输入任何内容并移动到下一个文本框，则该文本框为空值

如果用户填写文本框，则值不变

我尝试了以下 Javascript 代码但没有成功:

if (document.activeElement.id == 'input-textbox-id' && !document.activeElement.value) {
            document.querySelector("#input-textbox-id").value="http://";
} else if (document.activeElement.id != 'input-textbox-id' && (!document.activeElement.value || document.activeElement.value == 'http://')) {
            document.querySelector("#input-textbox-id").value="";
}

Answer 1

您可以为此使用 focus 和 blur 事件。

假设变量 textBox 包含对您的 textBox 元素的引用，您可以使用以下代码:

let textBox = document.getElementById("a");

textBox.addEventListener("focus", function() {
  if (!this.value) {
    this.value += "http://";
  }
});
textBox.addEventListener("blur", function() {
  if (this.value == "http://") {
    this.value = "";
  }
});

<input type="text" id="a">