mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
3ddae5ea36
This CL moves KeyboardEvents from the old event model to NewEventHandler. This CL keeps the basic structure of keydown, keypress, keyup events even though that's a bit wacky. As with pointer and gesture events, this CL removes PlatformKeyboardEvent in favor of just using WebKeyboardEvent. I've also made WebKeyboardEvent align more closely with Mojo's keyboard event. The CL does change one important aspect of key event handling: on the web the "keyCode" property of KeyboardEvent changes its meaning depending on whether the event is a keydown or a keypress event. For the former events, keyCode is the "virtual" (i.e., windows) key code where for the latter events, keyCode is the character code. To be more precise, I've renamed keyCode to virtualKeyCode and I've given it a zero (unknown key code) value during keypress events. R=ojan@chromium.org, eseidel@chromium.org Review URL: https://codereview.chromium.org/872233002
72 lines
1.9 KiB
Plaintext
72 lines
1.9 KiB
Plaintext
<!--
|
|
// Copyright 2015 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
-->
|
|
<import src="/sky/framework/shell.sky" as="shell" />
|
|
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
|
|
<import src="/mojo/services/keyboard/public/interfaces/keyboard.mojom.sky" as="keyboard" />
|
|
|
|
<sky-element name="sky-input" attributes="value:string">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
display: flex;
|
|
border: 1px solid blue;
|
|
margin: 5px;
|
|
padding: 4px;
|
|
}
|
|
#control {
|
|
flex: 1;
|
|
align-self: center;
|
|
height: 1.2em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<div id="control" contenteditable
|
|
on-focus="handleFocus"
|
|
on-blur="handleBlur"
|
|
on-keydown="handleKeyDown">{{ value }}</div>
|
|
</template>
|
|
<script>
|
|
var keyboard = shell.connectToService("mojo:keyboard", keyboard.Keyboard);
|
|
module.exports = class extends SkyElement {
|
|
shadowRootReady() {
|
|
var control = this.shadowRoot.getElementById('control');
|
|
var text = control.firstChild;
|
|
|
|
var observer = new MutationObserver(function() {
|
|
// contenteditable might remove the text node, but we need to keep it
|
|
// since that's where the data binding is connected to.
|
|
if (!text.parentNode)
|
|
control.appendChild(text);
|
|
if (this.value == control.textContent)
|
|
return;
|
|
this.value = control.textContent;
|
|
this.dispatchEvent(new CustomEvent('change', {
|
|
bubbles: true,
|
|
}));
|
|
}.bind(this));
|
|
|
|
observer.observe(control, {
|
|
subtree: true,
|
|
characterData: true,
|
|
childList: true,
|
|
});
|
|
}
|
|
handleKeyDown(event) {
|
|
// TODO(abarth): You can still get newlines if the user pastes them.
|
|
if (event.key == 0xD)
|
|
event.preventDefault();
|
|
}
|
|
handleFocus(event) {
|
|
keyboard.show();
|
|
}
|
|
handleBlur(event) {
|
|
keyboard.hide();
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|