views:

966

answers:

5

Hi,

I can't figure out how to trigger a keydown event on a textarea element, e.g. imagine i have two textarea elements and when i type something in the first one, I want the second box to show the typing as well, but for a certain reason I have to do it via events. This is what I tried and it doesn't work:

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

<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>

Any ideas how could I achieve that?

A: 

Here's an example: apparently you add to the textarea's value property.

ChrisW
+1  A: 

Try this:

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

Working demo: http://jsbin.com/ivulu

Or if you don't want to sanitize the data: http://jsbin.com/oposu

$(document).ready(function() {
var $comment = '';
$('#first').keyup(function() {
    $comment = $(this).val();
    $('#second').html( $comment );
});
});
jyoseph
As I stated in the question, I can't just assign value of the first box to the second, I have to do it via events. Long story why, it just has to go that way
A: 

The keydown event is not responsible for actually updating the value of the textbox. Your code works just fine, but since you don't have an event handler on the second textbox, it doesn't look like anything happens. If you want to update the text in the textbox, change its value, as demonstrated by jyoseph.

If you need to trigger the event as well (for some reason), your code as written will do that.

Adam Bellaire
ok, here's the real issue - on keydown I need to know if the key pressed produces a visible character, e.g. if i press "a" i see "a", but if i press an arrow key then nothing changes in the text box. So what i am trying to do is to create a dynamic helper textbox and in keypress handler of my first box resend the event to that dynamic box and see if it's value changes... i see no other way of reliably detecting if a key pressed is a character or a special key (think of combinations of ALT+<some multidigit code> that produces a visible special character - how else do I detect that?)
Your best bet is to keep a list of "invisible" keycodes (from a list such as http://aspdotnetfaq.com/Faq/What-is-the-list-of-KeyCodes-for-JavaScript-KeyDown-KeyPress-and-KeyUp-events.aspx) and ignore them explicitly. You can't modify the content of a textbox using events alone, events are just "along for the ride" when it comes to interactive controls. To backtrack a little more, why do you need to distinguish visible keycodes from invisible ones?
Adam Bellaire
By the way, ALT+(numbers) will not send the keycode for the high-ascii character, but will actually send a sequence of keycodes, one for each key pressed (ALT, number, number, etc.)
Adam Bellaire
+2  A: 

The event is sent, the browser just doesn't react to it (i.e., put characters in the textarea)

Not all browsers (that I know of) allow you to dispatch events, not just trigger them. But even doing that is far from perfect

// 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 );
});

Try this example and you'll see what I mean by how it's far from perfect. Basically, the way to do what you're asking is also the way you say you can't - by value.

However, you can pass custom data along with the event, which leads to a solution that looks like this

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

Is that good enough?

Peter Bailey
A: 

You can't just "create" events on the client's machine. Can't you imagine the potential security vulnerabilities? It's a no-brainer. The only thing you can do is fire an event handler...

textarea2.onkeydown();
Josh Stodola