4

2つのテキストエリアがあるとしましょう...

テキストエリア1

<textarea class="one"></textarea>

テキストエリア2

<textarea class="two">Hi There.</textarea>

textarea2のテキストの後にtextarea1に入力したテキストを追加できるようにしたい。例：「私の名前はジョーです」と書いた場合。textarea 1では、同時に複製して「私の名前はJoeです」と書き込みます。既存の「HiThere」の後のtextarea2にあります。文章。

結果は...

<textarea class="2">Hi There. My name is Joe.</textarea>

jQueryでこれを行うことはできますか、それともAJAXでこれを行う必要がありますか？どうすればこれを行うことができますか？

4

5 に答える 5

4

ajaxは必要ありません。

$('.one').on('keyup', function(){
    $('.two').html( $(this).val() );
});

デモ： http： //jsfiddle.net/agz9Y/

于 2012-04-12T23:44:05.087 に答える
3

イベントにバインドするときにラグが発生しkeyupます。通常、keydownイベントにバインドする場合、テキスト領域の値はまだ変更されていないため、keydownイベント中に押されたキーを判別するまで、2番目のテキスト領域の値を更新することはできません。幸運なことString.fromCharCode()に、新しく押されたキーを2番目のテキスト領域に追加するために使用できます。これはすべて、ラグなしで2番目のテキスト領域をすばやく更新するために行われます。

$('.one').on('keydown', function(event){
    var key = String.fromCharCode(event.which);
    if (!event.shiftKey) {
        key = key.toLowerCase();
    }
    $('.two').val( $(this).val() + key );
});​

これがデモです：http：//jsfiddle.net/agz9Y/2/

これにより、2番目のテキスト領域の内容が最初のテキスト領域と同じになります。最初のテキスト領域を2番目のテキスト領域に追加する場合は、上書きするのではなく、最初の値を2番目のテキスト領域に追加するだけです。

$('.one').on('keydown', function(event){
    var key = String.fromCharCode(event.which);
    if (!event.shiftKey) {
        key = key.toLowerCase();
    }
    $('.two').val( $('.two').val() + $(this).val() + key );
});​

これがデモです：http：//jsfiddle.net/agz9Y/3/

アップデート

これを少し変更して、.two要素が独自の値を記憶するようにすることができます。

$('.one').on('keydown', function(event){
    var key = String.fromCharCode(event.which);
    if (!event.shiftKey) {
        key = key.toLowerCase();
    }

    //notice the value for the second textarea starts with it's data attribute
    $('.two').val( $('.two').data('val') + ' -- ' + $(this).val() + key );
});

//set the `data-val` attribute for the second textarea
$('.two').data('val', '').on('focus', function () {

    //when this textarea is focused, return its value to the remembered data-attribute
    this.value = $(this).data('val');
}).on('change', function () {

    //when this textarea's value is changed, set it's data-attribute to save the new value
    //and update the textarea with the value of the first one
    $(this).data('val', this.value);
    this.value = this.value + ' -- ' + $('.one').val();
});​
于 2012-04-12T23:49:03.843 に答える
0 
​$(function(){
    $('textarea.one').on('keyup', function(e){
        $('textarea.two').val($(this).val());
    });
});​

例

于 2012-04-12T23:45:55.890 に答える
0

デモ 

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })
于 2012-04-12T23:47:24.117 に答える
0

誰かがバニラJSを必要とする場合

var __one = document.querySelector('.one'),
    __two = document.querySelector('.two'),
    __handler = null;


__handler = function(e)
{

    e.preventDefault();

    __two.innerHTML = this.value;

}

__one.addEventListener('keyup', __handler);

デモjsfiddle

于 2014-03-17T09:54:37.857 に答える