入力時にテキストフィールドが変更されたときのスパンを変更する

Question

spanフィールドのテキストをのように変更する場合は、inputフィールドを変更します。

だから、私は私がinputフィールドに入力するようspanフィールド内のテキストを変更したいinputフィールド

<input type="text"> 

とspanフィールド

<span></span> 

を持っています。

私には既にこのような質問があることがわかりましたChange span when text field changes。しかし、この質問を異ならせるのは、入力時に変更が行われることです。すなわち、liveです。

Answer 1

バニラはJavaScriptバージョンです。答えを

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>

Answer 2

非常に単純ですが、keyupイベントを使用してください。最新のブラウザで

$(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>

、あなたはoninputイベントを使用することができます。

Answer 3

あなたはinputイベント

をして 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のソリューションを使用してイベントを聞き、HTML5にinputイベントを使用することができますここでは0

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

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