Question

我无法弄清楚如何在textarea元素上触发keydown事件，例如想象我有两个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>

任何想法我怎么能实现这个目标？

Answer 1

事件被发送，浏览器只是没有对它做出反应（即将字符放在textarea中）

并非所有浏览器（我所知道的）都允许您分派事件，而不仅仅是触发事件。但即使这样做也远非完美

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

这够好吗？

Answer 2

试试这个：

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

Answer 3

Here's an example：显然你添加到textarea的value属性。

Answer 4

keydown事件不负责实际更新文本框的值。您的代码工作得很好，但由于您在第二个文本框中没有事件处理程序，因此看起来不会发生任何事情。如果要更新文本框中的文本，请更改其值，如jyoseph所示。

如果您还需要触发事件（由于某种原因），您编写的代码也会这样做。

Answer 5

您不能只在客户端的计算机上“创建”事件。你不能想象潜在的安全漏洞吗？这是一个明智的选择。你唯一能做的就是激活一个事件处理程序......

textarea2.onkeydown();

Javascript将密钥代码发送到<textarea>元素</textarea>

5 个答案: