當用戶在文本框中輸入文本時，請附加一個前綴值

Question

我有一個文本框，需要填寫網站網址。 因此，當用戶將光標放在文本框中時，文本框應預填充“ 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"> 

Answer 2

您將需要使用addEventListener附加event偵聽器。 您需要的活動： focus和focusout 。

我們為所有輸入添加.http-prefill類。 我們遍歷inputs數組並附加事件。

完成操作后，請不要忘記刪除eventListener 。 您卸載表格。

為此，只需復制用於添加偵聽removeEventListener的代碼並將addEventListener替換為removeEventListener 。

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

示例代碼：

 var fillValue = 'http://'; var onFocus = function() { this.value = fillValue; } var onFocusOut = function() { if (this.value === fillValue) { this.value = ''; } } var inputs = document.querySelectorAll('.http-prefill'); inputs.forEach(function(input) { input.addEventListener('focus', onFocus); input.addEventListener('focusout', onFocusOut); }); 

 .http-prefill { width: 100%; margin-bottom: 5px; } 

 <input class="http-prefill" name="input-0" /> <input class="http-prefill" name="input-1" /> <input class="http-prefill" name="input-2" /> <input class="http-prefill" name="input-3" /> 

Answer 3

您可以使用諸如onKeyDown之類的鍵事件，當按下key鍵時，您可以保留舊值並將其附加新值。

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;
      }
     }

這是工作代碼。 http://jsbin.com/zoxiwokepi/edit?html,output