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
.
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.com/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.com/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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With