इसके साथ ही एक और Textarea के लिए एक Textarea से पाठ लिखने

Question

इसके साथ ही एक और Textarea के लिए एक Textarea से पाठ लिखने

वोट

23

मान लीजिए कि मैं दो textareas करते हैं ...

पाठ क्षेत्र 1

<textarea class=one></textarea>

पाठ क्षेत्र 2

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

मैं क्या मैं पाठ क्षेत्र दो में पाठ के बाद पाठ क्षेत्र एक में टाइप से पाठ जोड़ने के लिए सक्षम होना चाहते हैं। उदाहरण के लिए: अगर मैं लिखना मेरा नाम जो है। पाठ क्षेत्र में यह एक साथ नकल और लिखेंगे मेरा नाम जो है। मौजूदा के बाद दो पाठ क्षेत्र में हाय वहाँ। पाठ।

परिणाम होगा ...

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

मैं jQuery के साथ ऐसा कर या मैं AJAX के साथ ऐसा करने की आवश्यकता कर सकते हैं? मैं ऐसा कैसे कर पाऊंगा?

jquery ajax

12/04/2012 को 22:42
उपयोगकर्ता Joe

अन्य भाषाओं में...

5 जवाब

वोट

4

कोई ajax की आवश्यकता है।

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

डेमो: http://jsfiddle.net/agz9Y/

12/04/2012 को 22:44
का स्रोत उपयोगकर्ता AlienWebguy

वोट

0

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

उदाहरण

12/04/2012 को 22:45
का स्रोत उपयोगकर्ता The Alpha

वोट

0

डेमो

$('#TextBox1').keydown(function(){
        $('#TextBox2').val($(this).val())
    })
$('#TextBox2').keydown(function(){
        $('#TextBox1').val($(this).val())
    })

12/04/2012 को 22:47
का स्रोत उपयोगकर्ता coder

वोट

0

किसी की जरूरत है वेनिला जे एस

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

17/03/2014 को 07:54
का स्रोत उपयोगकर्ता Slawe

Jasper · Accepted Answer · 2012-04-12 22:49

जब आप के लिए बाध्य अंतराल देखेंगे keyupघटना। आप सामान्य रूप से करने के लिए बाध्य जब keydownघटना पाठ क्षेत्र के मूल्य अभी तक तो आप दूसरा पाठ क्षेत्र के मूल्य जब तक आप कुंजी के दौरान दबाए निर्धारित अद्यतन नहीं कर सकते नहीं बदला है keydownघटना। हमारे लिए भाग्यशाली हम उपयोग कर सकते हैं String.fromCharCode()दूसरा पाठ क्षेत्र के लिए हाल में दबाया कुंजी संलग्न करने के लिए। यह सब किसी भी अंतराल के बिना जल्दी से दूसरा पाठ क्षेत्र अद्यतन बनाने के लिए किया जाता है:

$('.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/

यह कर देगा दूसरा पाठ क्षेत्र, पहले एक के रूप में एक ही सामग्री है, तो आप क्या में दूसरे के लिए पहली बार है तुम सिर्फ अधिलेखन के बजाय दूसरे के लिए पहली बार के मूल्य को जोड़ सकते हैं संलग्न करना चाहते हैं:

$('.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();
});