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">

Answer 2

您将需要使用event来附加addEventListener侦听器。您需要的事件：focus和focusout。

我们为所有输入添加.http-prefill类。我们遍历inputs数组并附加事件。

完成操作后，请不要忘记删除eventListener，例如。您卸载表格。

要这样做，只需复制用于添加侦听器的代码，然后将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

当用户在文本框中输入文本时，请附加一个前缀值

3 个答案: