在按键事件中使用jQuery设置文本区域中的文本

Question

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

HTML

<textarea>

事件监听器

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

手动键入"1〃；在文本区域

结果："；1〃；显示在文本区域，事件为

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

现在尝试输入"；1〃；在带有jQuery的文本区域

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在文本区域显示或设置文本
• 当键事件触发时；1〃；不显示在文本区域

示例JS fiddlehttps://jsfiddle.net/np1h9c8k/3/

Answer 1

您的代码运行良好，并且完全符合要求。您只是在触发事件，模拟keypress、keydown、keyup。这些事件是单向绑定的，它们只从元素接收事件，而不将事件传送回元素，谢天谢地。

如果他们这样做了，那么每当有人听到其中一个事件时，他们键入的任何内容都会在输入中相乘，就像这个模拟的片段

$("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