- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我在文本框中键入并控制台在 Chrome 中记录 keydown 事件时,我可以看到它有很多属性(特别是我正在尝试访问 KeyboardEvent.code)。
控制台输出
{
altKey: false
bubbles: true
cancelBubble: false
cancelable: true
charCode: 0
code: "Tab"
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: true
detail: 0
eventPhase: 0
isComposing: false
isTrusted: true
key: "Tab"
keyCode: 9
location: 0
metaKey: false
path: (25) [input#My-monthly-budget.form-control.p-0.border-left-0.spec--money-input.ng-untouched.ng-invalid.is…, div.input-group.is-invalid, div.fc-col-input, div.fc-row, finance-control-money.col-sm-12.my-2.my-md-3.my-lg-0.col-lg-3, div.row.mb-1.pb-2.ng-star-inserted, finance-filters-section.mt-5.mt-lg-3.pt-1, div.finance-filters-container, section#finance-filters.ng-star-inserted, finance-section.ng-star-inserted, section.pl-3.py-3, div.ng-tns-c15-4.ng-trigger.ng-trigger-toggleAccordion, div.py-3, personalise-journey-step-accordion#personalise-funding.ng-tns-c15-4, div.container.mt-5, ng-component.ng-star-inserted, ng-component.ng-star-inserted, div.position-relative.pt-5.ng-trigger.ng-trigger-routerTransition, div.ng-tns-c3-1, ng-component.ng-tns-c3-1.ng-star-inserted, app-root, body#login-page.login-page.system-page.live.auth-page, html, document, Window]
repeat: false
returnValue: false
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: input#My-monthly-budget.form-control.p-0.border-left-0.spec--money-input.ng-untouched.ng-invalid.is-invalid.ng-dirty
target: input#My-monthly-budget.form-control.p-0.border-left-0.spec--money-input.ng-untouched.ng-invalid.is-invalid.ng-dirty
timeStamp: 11386.555000091903
type: "keydown"
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
which: 9
}
{ "isTrusted": true }
<my-app></my-app>
// import does not work in Codepen
// using const instead
const {Component, HostListener} = ng.core;
const {bootstrap} = ng.platform.browser;
@Component({
selector: 'my-app',
template: '<div style="padding:1rem; display:flex; flex-direction: column"><input placeholder="Type here to see"> <div style="margin-top:1rem;">Event has property "code": {{value}}</div><div style="margin:1rem 0">Event:</div><span style="border:1px solid black; padding:1rem">{{event | json}}</span><div style="margin-top:1rem">View console to see difference between object and console.log</div>'
})
class AppComponent {
public value:boolean ;
public event: KeyboardEvent;
@HostListener('keydown', ['$event'])
public onKeyDown(event: KeyboardEvent): boolean {
this.value = event.hasOwnProperty('code');
this.event = event;
console.log(event)
}}
bootstrap(AppComponent);
最佳答案
Why is there a difference between the console.log() of the event and assigning the event?
json
管道 (
{{event | json}}
) 执行
JSON.stringify
将值转换为其 JSON 格式的表示。
Source
JSON.stringify
作品
here
console.log(JSON.stringify(event))
- 你会得到完全相同的输出。
关于javascript - 在 keydown 上,为什么值的 console.log 与将值分配给对象不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61410474/
我试图在用户开始输入后将类(.active)添加到文本字段。我让它在某种程度上与以下代码一起工作,但由于某种原因,当用户开始键入时,.active 类不会立即应用,它仅在键入第二个字母后才应用。有什么
在 Mac 的 Chrome、Safari 和 Opera 上,正文实时绑定(bind)和文档 keydown 绑定(bind)均有效 $(document).ready(function() {
我使用 fancybox 来弹出表单,我的客户不希望背景应该滚动 Firefox 仍然允许用户通过箭头键滚动背景。 现在我阻止用户按箭头键直到弹出完整文档,但它也会停止我的表单中的相同按键。 这些选项
我有 UserControl 并面临 KeyDown 事件的问题。我的 UserControls 将显示反对撤销 Windows 窗体 keydown 事件,如下所示: 用户控件的事件: privat
我发现了很多相关问题(这里和其他地方),但还没有具体找到这个问题。 我正在尝试监听箭头键 (37-40) 的按键事件,但是当以特定顺序使用箭头键时,后续箭头不会生成“按键”事件。 例子: http:/
JQuery 的“:not”选择器不会阻止要排除的类(装饰元素)触发 .keydown 事件。为什么? 在以下代码中,当我按下 .newOwnerEntryInput 字段中的某个键时,我希望仅看到“
在测试环境中,将vue-test-utils更新到1.0.0-beta.26或更高版本后,keydown事件不再由keyCode触发,例如: Vue 脚本 public onKeydown
据我了解,当按下键盘按钮时,它应该为具有焦点的控件调用 KeyDown 事件。然后,父控件的 KeyDown,依此类推,直到到达主窗体。除非 - 沿着链条,其中一个 EventHandlers 做了:
在 IE11 中,触发 keydown 事件有一种奇怪的行为。 请使用以下网址重现: http://jsfiddle.net/marbug/79dz6ajz/ 有一个带有两个输入字段的表单:
我有一个带有 3 个 NSTableViews 和 1 个 NSCollectionView 的窗口。集合 View 显示图像。我希望能够选择其中一个图像并使用键盘删除键将其删除,但我无法让 coll
我有一个WinForms表单(C#/。Net),它包含一个PictureBox,MenuStrip,Panel和两个Button控件。 我需要为整个窗口的箭头键检测KeyDown事件;即,当窗口位于前
我在使用 JQuery DataTable 捕获 keydown 事件时遇到问题。我的目标是允许用户使用箭头键导航表的行。因此,当用户按下箭头键时,我想捕获 keydown 事件并移动表的选定行(这是
我查看了一些相关问题,但没有一个能帮助我解决我的问题。 我有自己的从头开始构建的动态数据网格表单,可以在其中添加/删除数据行和字段列等。我正在尝试提高可用性,以便按回车键将创建一个新的字段列并且给予重
我试图通过按下来执行特定操作,例如空格键(任何地方)。在我的代码中,我有 AcceptFirstResponder 方法和 keyDown 方法,但我没有收到 NSLog 消息 代码如下: - (BO
我正在开发一个 Mozilla 插件,它将左侧的数字键替换为 Shift + 等效键。例如,如果您按 1,它将被替换为 '!'自动(特别适用于在线编译器)。这是代码 document.activeEl
我的表单具有以下语义结构 Sign Up Username
我正在尝试创建一个对象来处理用户的键盘输入。 var control = new Control (); function Control () { this.w = 0; this.
我编写了一个简单的代码,当按下某个键时,它应该改变框的可见性,但是出了问题,因为无论按下哪个按钮,它总是说它是错误的。 这应该只有在按下“f”键时才有效,现在根本不起作用...... const br
在我的代码中,用于提醒每个 keydown 事件上提交的所有文本区域行,但循环不起作用 function limitTextareaLine(e) { var textArray = $(this
我有一个用于捕获和注册箭头键输入的系统。它一直有效到一定程度。只要按下两个或更少的键,它就会正确记录同时按下多个键的情况。如果第三个或第四个按钮同时按下,它将停止触发按键事件。请参阅this jsFi
我是一名优秀的程序员,十分优秀!