JavaScriptを使用して入力値を動的に表示

Question

私はフォームを持っています。フォームの特定の要素を記入するとすぐに動的に表示します。私はあなたの名前のテキスト入力があった場合

を想像してみてください。入力する際に​​、あなたの名前がウェブページの別の部分にも表示されるようにします。

私はこれを最も簡単な方法でどのように達成しますか？

Answer 1

（更新については以下を参照してください、私は後で私は完全にマウス操作を使用して、フィールドにテキストを貼り付け処理するために忘れて実現しました。）

あなたはおそらくたいと思う（keypressイベントをフックすることができます​​およびkeyup）をテキスト入力フィールドに追加し、DOMエレメントの更新を他の場所でトリガーするために使用します。例えば：

var nameField = document.getElementById('nameField'); 
nameField.onkeydown = updateNameDisplay; 
nameField.onkeyup = updateNameDisplay; 
nameField.onkeypress = updateNameDisplay; 
function updateNameDisplay() { 
    document.getElementById('nameDisplay').innerHTML = this.value || "??"; 
} 

（私は正常にいないよう「onXyz」プロパティ、）DOM0スタイルのイベントハンドラを使用して、非常に基本的な例です

Live example

。 最も簡単な方法は、jQuery,Prototype、YUI、Closure、またはany of several othersのようなライブラリを使用することです。これらの作業を行う方法は、です。ブラウザの違いをスムーズにして、実際に何をしようとしているのかに集中できます。

は、ここではjQueryを使用して、上記の：

$('#nameField').bind('keydown keyup keypress', function() { 
    $('#nameDisplay').html(this.value || "??"); 
}); 

Live example

---

更新：実際には、上記のマウスを使用してフィールドに貼り付けるようなものを欠場します。あなたはchangeハンドラは、このために良いことだと思うだろうが、フォーカスがフィールドを離れるまで、それは必ずしも発生しませんので、それはこのような時限プロセスを使用しては珍しいことではありません。

のJavaScript、無ライブラリ：

var nameField = document.getElementById('nameField'); 
var lastNameValue = undefined; 

updateNameDisplay(); 

setInterval(updateNameDisplay, 100); 

function updateNameDisplay() { 
    var thisValue = nameField.value || "??"; 
    if (lastNameValue != thisValue) { 
    document.getElementById('nameDisplay').innerHTML = lastNameValue = thisValue; 
    } 
} 

Live example

あなたは、フィールドごとにこれらの別々の1つを有する避けたいでしょう（代わりに、それらのすべてのための単一のタイマーを使用します）、あなたは実際に何に応じてタイマーを調整したいと思います  —は、あなたがしているときに敏感である必要があります彼、あなたは資源を消費しています。

var timerHandle = setInterval(updateNameDisplay, 100); 

を...と、このようなループを停止する：あなたは、いくつかの段階でチェックを停止することをお勧めします（と、それは良いアイデアだ）した場合、setIntervalからの戻り値を保存

clearInterval(timerHandle); 
timerHandle = 0; 

をここで

---

は、フィールドにフォーカスがあるときにのみ、タイマーを使用して、動的にフィールドを見ているのより完全な例です。この例ではjQueryを使用していますが、単純化するために使用しました。別のライブラリを使用するかライブラリを使用しない場合は、簡単に移植することができます（この場合、jQueryは便利です）。フォーム内の入力）を見つけること：

jQuery(function($) { 
    var formTimer = 0, 
     currentField, 
     lastValue; 

    updateWatchingIndicator(); 
    $('#theForm :input') 
    .focus(startWatching) 
    .blur(stopWatching) 
    .keypress(updateCurrentField); 

    function startWatching() { 
    stopWatching(); 
    currentField = this; 
    lastValue = undefined; 
    formTimer = setInterval(updateCurrentField, 100); 
    updateWatchingIndicator(); 
    } 

    function stopWatching() { 
    if (formTimer != 0) { 
     clearInterval(formTimer); 
     formTimer = 0; 
    } 
    currentField = undefined; 
    lastValue = undefined; 
    updateWatchingIndicator(); 
    } 

    function updateCurrentField() { 
    var thisValue; 

    if (currentField && currentField.name) { 
     thisValue = currentField.value || "??"; 
     if (thisValue != lastValue) { 
     lastValue = thisValue; 
     $('#' + currentField.name + 'Display').html(thisValue); 
     } 
    } 
    } 

    function updateWatchingIndicator() { 
    var msg; 

    if (currentField) { 
     msg = "(Watching, field = " + currentField.name + ")"; 
    } 
    else { 
     msg = "(Not watching)"; 
    } 
    $('#watchingIndicator').html(msg); 
    } 

});​ 

Live example

Answer 2

使用OnKeyPressイベントのJavaScript。これについてはw3schools pageをチェックしてください。それを使用して、アイテムを表示するDOM要素を更新する関数を呼び出すことができます。

<script type="text/javascript"> 
function update(element) 
{ 
    document.getElementById("dynamic_name").innerHTML = element.value; 
} 
</script> 
<input type="text" onkeypress="update(this)" /> 
<div id="dynamic_name"></div> 

明らかに要素の名前を変更して移動することができますが、これは一般的な概念です。

Answer 3

A非常にシンプルでエレガントなソリューションは、AngularJSを使用することができます