javascript - Change span when text field changes as you type - Stack Overflow

admin管理员组

文章数量:1296485

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

So I have a input field

<input type="text">

and a span field

<span></span>

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

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.

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

So I have a input field

<input type="text">

and a span field

<span></span>

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

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
• html
• css
• dom-events

Share Improve this question Follow edited Nov 14, 2021 at 12:54 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 25, 2016 at 9:27 krimzkrimz 871010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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>

Very simple, use a keyup event.

$(function () {
  $("input").keyup(function () {
    $("span").text(this.value);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<p><span></span></p>

In the latest browsers, you can use oninput event.

You can use HTML5 input event, listen the event using on()

$('.input').on('input', function() {
  $('.span').text(this.value)
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="input">
<br><span class="span"></span>

---

JavaScript solution with input event

function change(val) {
  document.querySelector('.span').innerHTML = val;
}

<input type="text" oninput="change(this.value)">
<br><span class="span"></span>

本文标签： javascriptChange span when text field changes as you typeStack Overflow