フォームフィールドのぼかしでDIVでテキストを表示

Question

私はこれを5時間以上探していますが、助けてくれません。

誰かが入力できるフォームフィールド（テキスト）が必要です。彼らが入力するか、フィールドのぼかしの後に、私はそのテキストが画面上のdivに表示されるようにします。おそらく、これは不可能です。

私が試した最後のコードはここにありますが、もちろん動作しません。そのコードで

<p>Headline Text:<br /> 
<input type="text" name="headline" value="$headline" onChange="document.getElementById('headline2').value=this.value" /></p> 
<br /> 
<div id="headline2"></div> 

、headlineに入力したものは、ぼかしに<div id="headline2"></div>に表示されます。

助けがあれば助かります。

Answer 1

あなたはありませんでした遠い！
<div>に値がありません...しかし、内部HTMLがあります。 ;）それは変化にここ

です：

<p>Headline Text:<br /> 
 
     <input type="text" name="headline" value="$headline" onChange="document.getElementById('headline2').innerHTML=this.value" /></p> 
 
    <br /> 
 
    <div id="headline2"></div>

そして、keyUpイベントに

：

<p>Headline Text:<br /> 
 
     <input type="text" name="headline" value="$headline" onKeyup="document.getElementById('headline2').innerHTML=this.value" /></p> 
 
    <br /> 
 
    <div id="headline2"></div>

Answer 2

HTML：

<input> 
<div id="target"></div> 

Javascriptを：私はあなたのスクリプトは、マークアップとは別に保つが、あなたがそう選択した場合をお勧めします

var input = document.querySelector('input'); 
var target = document.querySelector('div') 

input.addEventListener('blur', function() { 
    target.innerHTML = input.value 
}) 

...

<input onblur="document.getElementById('target').innerHTML = this.value"> 
<div id="target"></div> 

Answer 3

これは非常に可能性があり、あなたがましたveあなたの試みに近づいてください。問題は、<div>要素がvalueを持たず、innerHTMLしか持たないことです。また、あなたはおそらくonblurの代わりonChangeを探しています：

<p>Headline Text:<br /> 
 
    <input type="text" name="headline" value="$headline" onblur="document.getElementById('headline2').innerHTML = this.value" /></p> 
 
<br /> 
 
<div id="headline2"></div>

だけonblurで、あなたが実際に変更が表示さするための要素の外側をクリックしなければならないことを覚えておいてください。ユーザーが何かを入力するたびに変更したい場合は、代わりにonkeyupを探しています。

希望すると便利です。 :)

Answer 4

フォーム入力にはvalueプロパティがあり、divなどのコンテナ要素にはinnerHTMLがあります。代わりにこれを試してみてください：

<p>Headline Text:<br /> 
<input type="text" name="headline" value="$headline" 
onChange="document.getElementById('headline2').innerHTML=this.value" /> 
</p> 
<br /> 
<div id="headline2"></div> 

Answer 5

<input type="text" id="text" onkeyup="getTextVal()"> 
<div id="showtext"></div> 
<script> 
function getTextVal(){ 
    var val = document.getElementById('text').value; 
    var showText = document.getElementById('showtext'); 
    showText.innerText = val; 
} 
</script> 

はjsfiddle link

に参照してください。