Javascript 当用户在文本框中输入文本，然后附加一个前缀值

我有一个文本框，需要填写网站的网址。因此，当用户将光标放在文本框中时，文本框应以“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="";
}

---

您可以使用

focus

和

blur

事件进行此操作

假设变量

textBox

包含对textBox元素的引用，则可以使用以下代码：

let textBox=document.getElementById（“a”）；
addEventListener（“焦点”，函数（）{
如果（！this.value）{
this.value+=“http://”；
}
});
addEventListener（“模糊”，函数（）{
如果（this.value==“http://”）{
此值为“”；
}
});
您需要使用
addEventListener
附加
事件
侦听器。您需要的事件：
focus
和
focusout

我们为所有输入添加了
.httpprefill
类。我们迭代
输入
数组并附加事件

完成后，请不要忘记删除
eventListener
，例如卸载表单

为此，只需复制用于添加侦听器的代码，并将
addEventListener
替换为
removeventlistener

inputs.forEach(function(input) {
  input.removeEventListener('focus', onFocus);
  input.removeEventListener('focusout', onFocusOut);
});

示例代码：


var-fillValue='http://'；
var onFocus=function（）{
this.value=填充值；
}
var onFocusOut=函数（）{
if（this.value==fillValue）{
这个值=“”；
}
}
var inputs=document.querySelectorAll（'.http prefill'）；
输入。forEach（函数（输入）{
input.addEventListener（'focus'，onFocus）；
input.addEventListener（'focusout'，onFocusOut）；
});
.http预填充{
宽度：100%；
边缘底部：5px；
}
您可以使用一些键事件，如onKeyDown和when keydown，您可以获得旧值并将其附加新值

let keyPressed = true
function onKeyDown(event) {
    if(keyPressed && event.keyCode !== 8)
      {
        keyPressed = false;
        let oldvalue = document.getElementById('input-textbox-id').value;
        document.getElementById('input-textbox-id').value = "http://"+oldvalue
      }

    if(!document.getElementById('input-textbox-id').value)
      {
        keyPressed = true;
      }
     }

这是工作代码
 您不能为该文本框分配onclick事件，然后动态添加值吗？只有表单提交按钮
！document.activeElement.value
我认为这不是一个有效的条件，因为该值不是布尔类型。无论如何，如果您发布一个代码片段，它将有助于调试