Javascript отправка кодов ключей на элемент <textarea> - PullRequest
Новая
       19

Javascript отправка кодов ключей на элемент <textarea>

2 голосов
/ 05 августа 2009

Я не могу понять, как вызвать событие keydown для элемента textarea, например, Представьте, что у меня есть два элемента textarea, и когда я набираю что-то в первом, я хочу, чтобы во втором поле также отображался набор текста, но по какой-то причине я должен сделать это с помощью событий. Это то, что я пытался, и это не работает: 

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

<textarea id='first'></textarea>
<textarea id='second'></textarea>

<script>
    jQuery("#first").keydown(function(event)
    {
        var keydown = jQuery.Event("keydown")
        keydown.keyCode = event.keyCode
        keydown.which = event.which
        jQuery("#second").trigger(keydown)
    })
</script>

Есть идеи, как мне этого достичь?

Ответы [ 5 ]

2 голосов
/ 05 августа 2009

Событие отправлено, браузер просто не реагирует на него (т.е. вставляет символы в текстовое поле)

Не все браузеры (о которых я знаю) позволяют вам отправлять события, а не просто инициировать их. Но даже это далеко не идеально 

// Gecko only
$("#first").keypress(function(event)
{
  var evt = document.createEvent('KeyEvents');
  evt.initKeyEvent(
      event.type
    , event.bubbles
    , event.cancelable
    , event.view
    , event.ctrlKey
    , event.altKey
    , event.shiftKey
    , event.metaKey
    , event.keycode
    , event.charCode
  );
  $('#second')[0].dispatchEvent( evt );
});

Попробуйте этот пример, и вы поймете, что я имею в виду под тем, как он далек от совершенства. По сути, способ сделать то, что вы просите, - это также способ, которым вы говорите, что не можете - по значению.

Однако вы можете передавать пользовательские данные вместе с событием, что приводит к решению, которое выглядит следующим образом 

$("#first").bind( 'keyup change', function(event)
{
  $('#second').trigger( 'mimic', $(this).val() );
});
$("#second").bind( 'mimic', function( event, value )
{
  $(this).val( value );
})

Это достаточно хорошо?

1 голос
/ 05 августа 2009

Попробуйте это: 

$(document).ready(function() {
var $comment = '';
$('#first').keyup(function() {
    $comment = $(this).val();
    $comment = $comment.replace(/<\/?[^>]+>/g,"").replace(/\n/g, "<br />").replace(/\n\n+/g, '<br /><br />'); // this strips tags and then replaces new lines with breaks
    $('#second').html( $comment );
});
});

Рабочая демоверсия: http://jsbin.com/ivulu

Или, если вы не хотите очищать данные: http://jsbin.com/oposu

$(document).ready(function() {
var $comment = '';
$('#first').keyup(function() {
    $comment = $(this).val();
    $('#second').html( $comment );
});
});
0 голосов
/ 05 августа 2009

Вы не можете просто "создавать" события на компьютере клиента. Не можете ли вы представить потенциальные уязвимости безопасности? Это легко. Единственное, что вы можете сделать, это запустить обработчик событий ... 

textarea2.onkeydown();
0 голосов
/ 05 августа 2009

Событие keydown не несет ответственности за фактическое обновление значения текстового поля. Ваш код работает просто отлично, но поскольку у вас нет обработчика событий во втором текстовом поле, похоже, что ничего не происходит. Если вы хотите обновить текст в текстовом поле, измените его значение, как продемонстрировал jyoseph.

Если вам также необходимо (по какой-то причине) вызвать событие, ваш код, как написано, сделает это.

0 голосов
/ 05 августа 2009

Вот пример : очевидно, вы добавляете в свойство value текстовой области.

...