javascript - ワードプレスで入力フィールドのライブ値を取得する

Question

関数を使用してwordpressの「投稿の編集」画面の入力ボックスの現在のテキストに変数を設定しようとしています

私は現在持っています：

jQuery(document).on("change, keyup, click", "#input_box_1, #input_box_2, #input_box_3", functionName);

    function functionName(){
        var myvar = parseFloat(jQuery("#input_box").val());
    var myvar2 = parseFloat(jQuery("#input_box_2").val());
    var myvar3 = parseFloat(jQuery("#input_box_3").val());
      }
    });

もちろん、ドラフトを2回保存した場合にのみ機能します（初めて値を入力すると、入力ボックスのhtml値は保存するまで変更されず、再度保存すると、変数が新しい価値）。

私のアプローチを使用して、ユーザーが入力ボックスに何かを入力するたびに変数を更新するように設定する方法はありますか (使用、変更、キーアップ、クリック)。

Answer 1

確かにあります！

私はあなたのためにこのフィドルを作成しました：

http://jsfiddle.net/7HQ4W/

<p>Original Input Value:
    <br />
    <input type="text" id="origVal">
</p>
<p>Target Input Value:
    <br />
    <input type="text" id="tarVal">
</p>

$('#origVal').keyup(function () {
    $('#tarVal').val($(this).val());
});

[コメントに基づく更新]

http://jsfiddle.net/7HQ4W/1/

新しいコード サンプルに基づいて調整しました。それはどのように見えますか？

$('#input_box_1, #input_box_2, #input_box_3').keyup(function () {
    var myVar1 = $('#input_box_1').val();
    var myVar2 = $('#input_box_2').val();
    var myVar3 = $('#input_box_3').val();
    $('#display').html("<p>myVar1 = " + myVar1 +
        "<p>myVar2 = " + myVar2 +
        "<p>myVar3 = " + myVar3);
});

Answer 2

focusout（）を使用して、入力がフォーカスを失うたびに入力をキャプチャできます。

$("#input_box").focusout(function() {
    //Assign the value somewhee
    var myVar = $(this).val();
});

デモ： http： //jsfiddle.net/8wY7Q/

Answer 3

ユーザーが文字を入力するたびに変数が更新されるように、入力ボックスにバインドする必要があります:
js:

$('#input_box').on('keyup', function() {
    var my_value = $(this).val();
    $('#result').html(my_value);
});

html :

<input id="input_box" />
<p id="result"></p>    

フィドル: http://jsfiddle.net/a8jbF/

- アップデート -

新しいフィドル: http://jsfiddle.net/a8jbF/1/

更新コードを調整できるようにタイムアウトを使用する

-- 更新 2 --

上記のコードはそのまま機能しますが、入力が変更されているかどうかに関係なく、キーストロークごとにすべての変数を変更しているため、多くのオーバーヘッドがあります-

1 つの関数でこれを行うことに設定されていて、パフォーマンスを向上させたい場合は、(2 番目のフィドルで) 遅延関数を追加し、functionName を少し変更して (一部の) オーバーヘッドを削減します。

function functionName(){
    // wrap your variable set in a delay
    delay(function(){
        // actions to do after the delay is complete
        var myvar = parseFloat(jQuery("#input_box").val());
        var myvar2 = parseFloat(jQuery("#input_box_2").val());
        var myvar3 = parseFloat(jQuery("#input_box_3").val());
    }, 1000);
  }

Answer 4

イベントを処理するblurかfocusout、 $('#inputBox')