键入时文本字段更改时更改跨度 [英] Change span when text field changes as you type

问题描述

我希望span字段中的文本随着input字段更改live而更改.

I want text in the span field to change as the input field changes live.

所以我有一个input字段

<input type="text">

和一个span字段

<span></span>

我希望span字段中的文本随着我在input字段中键入而改变.

I want text in the span field to change as I type in the input field.

我知道已经有这样的问题被问到在文本字段更改时更改跨度.但是，使这个问题与众不同的是，您在键入live时应该进行更改.

I know there's already a question like this that was asked Change span when text field changes. But what makes this question different is the changes should happen as you type i.e. live.

推荐答案

这是原始的JavaScript版本.

Here is a vanilla JavaScript version.

var input  = document.querySelector("[type=text]"),
    output = document.querySelector(".output");

function keydownHandler() {
  output.innerHTML = this.value;
}

input.addEventListener("input", keydownHandler);

<input type="text">
<span class="output"></span>

这篇关于键入时文本字段更改时更改跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！