在按键事件中使用jQuery在textarea中设置文本[重复]

Posted 2023-04-18

【中文标题】在按键事件中使用jQuery在textarea中设置文本[重复]

【英文标题】：Set text in textarea with jQuery on keypress event [duplicate]

【发布时间】：2021-08-28 17:58:14

【问题描述】：

我不想用$('textarea').val('text') 在<textarea> 中设置文本，我想用事件设置它。

HTML

<textarea>

事件监听器

$("textarea").on("keyup keydown keypress", function(e) 
  console.log("Event: %s", this.type, e.which);
);

在 textarea 中手动输入“1”

结果：文本区域显示“1”，事件为

Event: keydown 49
Event: keypress 49
Event: keyup 49

现在尝试使用 jQuery 在 textarea 中输入“1”

var e0 = jQuery.Event("keydown");  e0.which = 49;
var e1 = jQuery.Event("keypress"); e1.which = 49;
var e2 = jQuery.Event("keyup");    e2.which = 49;

$('textarea').trigger(e0).trigger(e1).trigger(e2);

输出：所有事件都发生，但文本区域中不显示“1”。

Event: keydown 49
Event: keypress 49
Event: keyup 49

如何使用 keyevents 在 textarea 中显示或设置文本？ 当 keyevents 触发时，为什么 textarea 中不显示“1”？

示例 JS 小提琴 https://jsfiddle.net/np1h9c8k/3/

【问题讨论】：

你能创建 sn-p 以便我们测试它吗？

@ToniMichelCaubet jsfiddle.net/np1h9c8k/3

IIRC 触发 jQuery 事件只是运行事件处理程序。

您忘记在每次触发时调用textarea.val(1)。仅触发事件不足以设置输入的值。

【参考方案1】：

您的代码运行良好，并且完全按照应有的方式运行。你只是触发事件，模拟keypress、keydown、keyup。这些事件是单向绑定的，它们只接收来自元素的事件，它们不传输回元素的事件，感谢上帝。

如果他们这样做了，那么每次有人收听这些事件之一时，他们输入的任何内容都会在输入中成倍增加，就像这个模拟的 sn-p

$("textarea").on("keyup keydown keypress", function(e) 
  // this is the action you're expecting
  $(this).val(function() 
    return this.value + String.fromCharCode(e.which);
  )
);

function abc() 
  var e0 = jQuery.Event("keydown");
  e0.which = 49;
  var e1 = jQuery.Event("keypress");
  e1.which = 49;
  var e2 = jQuery.Event("keyup");
  e2.which = 49;
  $('textarea').trigger(e0).trigger(e1).trigger(e2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<textarea></textarea>
<Br>
<button onclick='abc()'>
 press me to enter text with JS
</button>
<Br> 1) enter manully value and check console character char
<br>
<Br>2) trying to enter same event with Jquery but event trigger but value does not disply in textarea

<Br><br>testing with number "1" its charcode is 49