<template>
<div class="inputContainer">
- <input
- v-model="input"
- type="text"
- >
+ <!-- <input
+ class="inputItem"
+ v-model="input"
+ :size="input.length"
+ v-if="input.length > 0"
+ type="text"
+ autofocus
+ > -->
+
+ <foreignObject x="10" y="10" width="100%" height="100%">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <input
+ class="inputItem"
+ v-model="input"
+ :size="input.length"
+ v-if="input.length > 0"
+ type="text"
+ >
+ </div>
+ </foreignObject>
+ <svg width="100%" xmlns="http://www.w3.org/2000/svg">
+ <foreignObject x="10" y="10" width="100%" height="100%">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ <input
+ class="inputItem"
+ v-model="input"
+ :size="input.length"
+ v-if="input.length > 0"
+ type="text"
+ >
+ </div>
+ </foreignObject>
+ </svg>
</div>
</template>
<script>
+import useKeyDownHandler from "@/composables/useKeyDownHandler";
import { defineComponent, ref, onUnmounted, inject } from "vue";
export default defineComponent({
name: "InputItem",
setup() {
+ const emitter = inject('mitt');
const input = ref("");
- const emitter = inject('mitt')
+ const {keyDownHandler} = useKeyDownHandler();
// submits newSelfMessage event
function handleEnterKey() {
if (input.value === "") {
return;
}
-
const message = {
content: input.value,
signature: 'EnriqueH',
emitter.emit('newSelfMessage', message);
}
+ // handles window keydown event
function handleInput(e) {
+ // gets char keyCode and char value
const inputCode = e.keyCode;
const cmd = String.fromCharCode(inputCode).toLowerCase();
- switch(inputCode) {
- case 13:
- handleEnterKey();
- break;
- case 8:
- input.value = input.value.slice(0, -1);
- break;
- default:
- input.value += cmd;
- }
- }
- window.addEventListener("keydown", handleInput);
+ // handles input cases
+ switch(inputCode) {
+ // handles Enter press: 13
+ case 13:
+ handleEnterKey();
+ break;
+ // handles Delete press: 8
+ case 8:
+ input.value = input.value.slice(0, -1);
+ break;
+ default:
+ input.value += cmd;
+ }
+ }
+ // add window event listener
+ window.addEventListener("keydown", keyDownHandler);
+ // remove Event Listener on component unMount
onUnmounted(() => {
- window.removeEventListener("keydown", handleInput);
+ window.removeEventListener("keydown", keyDownHandler);
});
return {
</script>
<style lang="scss" scoped>
- .inputContainer {
-
-
+ .inputItem {
+ /* width: 100%; */
+ color: #fff;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ border: 0;
+ text-align: center;
+ background-color: #61b4f4;
+ border-radius: 25px;
}
</style>
--- /dev/null
+import { ref } from "vue";
+// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
+// scanner attached via USB
+export default function useKeyDownHandler() {
+ function keyDownHandler(e: any) {
+ const input = ref("");
+ // keyboardCharMap is an array of arrays, with each inner
+ // array having 2 columns - un-shifted, and shifted values.
+ // iCol = 0 is the un-shifted value, while iCol=1 is the shifted value.
+ // See the "keyboardCharMap", below, for printable characters.
+ // MODIFY keyboardCharMap to suit your needs if you want
+ // more/less/different characters to be considered "printable".
+ let iCol = 0;
+ if (e.shiftKey) {
+ iCol = 1;
+ }
+ const ch = keyboardCharMap[e.keyCode][iCol];
+ // Optionally do things with non-printables,
+ // like CR, ESC, Backspace, LF, Tab, Arrows, F1-F24, etc.
+ // See the arrary "keyboardNameMap", below, for possible keys.
+ const cmd = keyboardNameMap[e.keyCode];
+ console.log("cmd: '" + cmd + "'");
+ switch (cmd) {
+ case "ENTER":
+ console.log("Enter was hit");
+ break;
+ case "DELETE":
+ console.log("DELETE WAS HIT");
+ break;
+ case "ESCAPE":
+ console.log("escape was clicked");
+ break;
+ default:
+ input.value += cmd;
+ console.log(cmd);
+ // ...and so on...
+ }
+ }
+ return {
+ keyDownHandler
+ };
+}
+
+// names of known key codes (0-255)
+var keyboardNameMap = [
+ "", // [0]
+ "", // [1]
+ "", // [2]
+ "CANCEL", // [3]
+ "", // [4]
+ "", // [5]
+ "HELP", // [6]
+ "", // [7]
+ "BACK_SPACE", // [8]
+ "TAB", // [9]
+ "", // [10]
+ "", // [11]
+ "CLEAR", // [12]
+ "ENTER", // [13]
+ "ENTER_SPECIAL", // [14]
+ "", // [15]
+ "SHIFT", // [16]
+ "CONTROL", // [17]
+ "ALT", // [18]
+ "PAUSE", // [19]
+ "CAPS_LOCK", // [20]
+ "KANA", // [21]
+ "EISU", // [22]
+ "JUNJA", // [23]
+ "FINAL", // [24]
+ "HANJA", // [25]
+ "", // [26]
+ "ESCAPE", // [27]
+ "CONVERT", // [28]
+ "NONCONVERT", // [29]
+ "ACCEPT", // [30]
+ "MODECHANGE", // [31]
+ "SPACE", // [32]
+ "PAGE_UP", // [33]
+ "PAGE_DOWN", // [34]
+ "END", // [35]
+ "HOME", // [36]
+ "LEFT", // [37]
+ "UP", // [38]
+ "RIGHT", // [39]
+ "DOWN", // [40]
+ "SELECT", // [41]
+ "PRINT", // [42]
+ "EXECUTE", // [43]
+ "PRINTSCREEN", // [44]
+ "INSERT", // [45]
+ "DELETE", // [46]
+ "", // [47]
+ "0", // [48]
+ "1", // [49]
+ "2", // [50]
+ "3", // [51]
+ "4", // [52]
+ "5", // [53]
+ "6", // [54]
+ "7", // [55]
+ "8", // [56]
+ "9", // [57]
+ "COLON", // [58]
+ "SEMICOLON", // [59]
+ "LESS_THAN", // [60]
+ "EQUALS", // [61]
+ "GREATER_THAN", // [62]
+ "QUESTION_MARK", // [63]
+ "AT", // [64]
+ "A", // [65]
+ "B", // [66]
+ "C", // [67]
+ "D", // [68]
+ "E", // [69]
+ "F", // [70]
+ "G", // [71]
+ "H", // [72]
+ "I", // [73]
+ "J", // [74]
+ "K", // [75]
+ "L", // [76]
+ "M", // [77]
+ "N", // [78]
+ "O", // [79]
+ "P", // [80]
+ "Q", // [81]
+ "R", // [82]
+ "S", // [83]
+ "T", // [84]
+ "U", // [85]
+ "V", // [86]
+ "W", // [87]
+ "X", // [88]
+ "Y", // [89]
+ "Z", // [90]
+ "OS_KEY", // [91] Windows Key (Windows) or Command Key (Mac)
+ "", // [92]
+ "CONTEXT_MENU", // [93]
+ "", // [94]
+ "SLEEP", // [95]
+ "NUMPAD0", // [96]
+ "NUMPAD1", // [97]
+ "NUMPAD2", // [98]
+ "NUMPAD3", // [99]
+ "NUMPAD4", // [100]
+ "NUMPAD5", // [101]
+ "NUMPAD6", // [102]
+ "NUMPAD7", // [103]
+ "NUMPAD8", // [104]
+ "NUMPAD9", // [105]
+ "MULTIPLY", // [106]
+ "ADD", // [107]
+ "SEPARATOR", // [108]
+ "SUBTRACT", // [109]
+ "DECIMAL", // [110]
+ "DIVIDE", // [111]
+ "F1", // [112]
+ "F2", // [113]
+ "F3", // [114]
+ "F4", // [115]
+ "F5", // [116]
+ "F6", // [117]
+ "F7", // [118]
+ "F8", // [119]
+ "F9", // [120]
+ "F10", // [121]
+ "F11", // [122]
+ "F12", // [123]
+ "F13", // [124]
+ "F14", // [125]
+ "F15", // [126]
+ "F16", // [127]
+ "F17", // [128]
+ "F18", // [129]
+ "F19", // [130]
+ "F20", // [131]
+ "F21", // [132]
+ "F22", // [133]
+ "F23", // [134]
+ "F24", // [135]
+ "", // [136]
+ "", // [137]
+ "", // [138]
+ "", // [139]
+ "", // [140]
+ "", // [141]
+ "", // [142]
+ "", // [143]
+ "NUM_LOCK", // [144]
+ "SCROLL_LOCK", // [145]
+ "WIN_OEM_FJ_JISHO", // [146]
+ "WIN_OEM_FJ_MASSHOU", // [147]
+ "WIN_OEM_FJ_TOUROKU", // [148]
+ "WIN_OEM_FJ_LOYA", // [149]
+ "WIN_OEM_FJ_ROYA", // [150]
+ "", // [151]
+ "", // [152]
+ "", // [153]
+ "", // [154]
+ "", // [155]
+ "", // [156]
+ "", // [157]
+ "", // [158]
+ "", // [159]
+ "CIRCUMFLEX", // [160]
+ "EXCLAMATION", // [161]
+ "DOUBLE_QUOTE", // [162]
+ "HASH", // [163]
+ "DOLLAR", // [164]
+ "PERCENT", // [165]
+ "AMPERSAND", // [166]
+ "UNDERSCORE", // [167]
+ "OPEN_PAREN", // [168]
+ "CLOSE_PAREN", // [169]
+ "ASTERISK", // [170]
+ "PLUS", // [171]
+ "PIPE", // [172]
+ "HYPHEN_MINUS", // [173]
+ "OPEN_CURLY_BRACKET", // [174]
+ "CLOSE_CURLY_BRACKET", // [175]
+ "TILDE", // [176]
+ "", // [177]
+ "", // [178]
+ "", // [179]
+ "", // [180]
+ "VOLUME_MUTE", // [181]
+ "VOLUME_DOWN", // [182]
+ "VOLUME_UP", // [183]
+ "", // [184]
+ "", // [185]
+ "SEMICOLON", // [186]
+ "EQUALS", // [187]
+ "COMMA", // [188]
+ "MINUS", // [189]
+ "PERIOD", // [190]
+ "SLASH", // [191]
+ "BACK_QUOTE", // [192]
+ "", // [193]
+ "", // [194]
+ "", // [195]
+ "", // [196]
+ "", // [197]
+ "", // [198]
+ "", // [199]
+ "", // [200]
+ "", // [201]
+ "", // [202]
+ "", // [203]
+ "", // [204]
+ "", // [205]
+ "", // [206]
+ "", // [207]
+ "", // [208]
+ "", // [209]
+ "", // [210]
+ "", // [211]
+ "", // [212]
+ "", // [213]
+ "", // [214]
+ "", // [215]
+ "", // [216]
+ "", // [217]
+ "", // [218]
+ "OPEN_BRACKET", // [219]
+ "BACK_SLASH", // [220]
+ "CLOSE_BRACKET", // [221]
+ "QUOTE", // [222]
+ "", // [223]
+ "META", // [224]
+ "ALTGR", // [225]
+ "", // [226]
+ "WIN_ICO_HELP", // [227]
+ "WIN_ICO_00", // [228]
+ "", // [229]
+ "WIN_ICO_CLEAR", // [230]
+ "", // [231]
+ "", // [232]
+ "WIN_OEM_RESET", // [233]
+ "WIN_OEM_JUMP", // [234]
+ "WIN_OEM_PA1", // [235]
+ "WIN_OEM_PA2", // [236]
+ "WIN_OEM_PA3", // [237]
+ "WIN_OEM_WSCTRL", // [238]
+ "WIN_OEM_CUSEL", // [239]
+ "WIN_OEM_ATTN", // [240]
+ "WIN_OEM_FINISH", // [241]
+ "WIN_OEM_COPY", // [242]
+ "WIN_OEM_AUTO", // [243]
+ "WIN_OEM_ENLW", // [244]
+ "WIN_OEM_BACKTAB", // [245]
+ "ATTN", // [246]
+ "CRSEL", // [247]
+ "EXSEL", // [248]
+ "EREOF", // [249]
+ "PLAY", // [250]
+ "ZOOM", // [251]
+ "", // [252]
+ "PA1", // [253]
+ "WIN_OEM_CLEAR", // [254]
+ "" // [255]
+];
+
+// This has the UnShifted and Shifted characters that each key maps to
+// Ones that are to be ignored for character input are empty.
+var keyboardCharMap = [
+ ["", ""], // [0]
+ ["", ""], // [1]
+ ["", ""], // [2]
+ ["", ""], // [3]
+ ["", ""], // [4]
+ ["", ""], // [5]
+ ["", ""], // [6]
+ ["", ""], // [7]
+ ["", ""], // [8]
+ ["", ""], // [9]
+ ["", ""], // [10]
+ ["", ""], // [11]
+ ["", ""], // [12]
+ ["\r", "\r"], // [13] - MOST control characters are ignored. This one (Carriage Return, or "Enter") is significant!
+ ["", ""], // [14]
+ ["", ""], // [15]
+ ["", ""], // [16]
+ ["", ""], // [17]
+ ["", ""], // [18]
+ ["", ""], // [19]
+ ["", ""], // [20]
+ ["", ""], // [21]
+ ["", ""], // [22]
+ ["", ""], // [23]
+ ["", ""], // [24]
+ ["", ""], // [25]
+ ["", ""], // [26]
+ ["", ""], // [27]
+ ["", ""], // [28]
+ ["", ""], // [29]
+ ["", ""], // [30]
+ ["", ""], // [31]
+ [" ", " "], // [32] // SPACE! Don't "clean it up" and remove the space!
+ ["", ""], // [33]
+ ["", ""], // [34]
+ ["", ""], // [35]
+ ["", ""], // [36]
+ ["", ""], // [37]
+ ["", ""], // [38]
+ ["", ""], // [39]
+ ["", ""], // [40]
+ ["", ""], // [41]
+ ["", ""], // [42]
+ ["", ""], // [43]
+ ["", ""], // [44]
+ ["", ""], // [45]
+ ["", ""], // [46]
+ ["", ""], // [47]
+ ["0", ")"], // [48]
+ ["1", "!"], // [49]
+ ["2", "@"], // [50]
+ ["3", "#"], // [51]
+ ["4", "$"], // [52]
+ ["5", "%"], // [53]
+ ["6", "^"], // [54]
+ ["7", "&"], // [55]
+ ["8", "*"], // [56]
+ ["9", "("], // [57]
+ ["", ""], // [58]
+ [";", ":"], // [59]
+ ["<", ""], // [60]
+ ["=", ""], // [61]
+ [">", ""], // [62]
+ ["?", ""], // [63] shifted; else "/"
+ ["", ""], // [64]
+ ["a", "A"], // [65]
+ ["b", "B"], // [66]
+ ["c", "C"], // [67]
+ ["d", "D"], // [68]
+ ["e", "E"], // [69]
+ ["f", "F"], // [70]
+ ["g", "G"], // [71]
+ ["h", "H"], // [72]
+ ["i", "I"], // [73]
+ ["j", "J"], // [74]
+ ["k", "K"], // [75]
+ ["l", "L"], // [76]
+ ["m", "M"], // [77]
+ ["n", "N"], // [78]
+ ["o", "O"], // [79]
+ ["p", "P"], // [80]
+ ["q", "Q"], // [81]
+ ["r", "R"], // [82]
+ ["s", "S"], // [83]
+ ["t", "T"], // [84]
+ ["u", "U"], // [85]
+ ["v", "V"], // [86]
+ ["w", "W"], // [87]
+ ["x", "X"], // [88]
+ ["y", "Y"], // [89]
+ ["z", "Z"], // [90]
+ ["", ""], // [91] Windows Key (Windows) or Command Key (Mac)
+ ["", ""], // [92]
+ ["", ""], // [93]
+ ["", ""], // [94]
+ ["", ""], // [95]
+ // Number Keypad Entries...
+ ["0", ""], // [96]
+ ["1", ""], // [97]
+ ["2", ""], // [98]
+ ["3", ""], // [99]
+ ["4", ""], // [100]
+ ["5", ""], // [101]
+ ["6", ""], // [102]
+ ["7", ""], // [103]
+ ["8", ""], // [104]
+ ["9", ""], // [105]
+ ["*", ""], // [106]
+ ["+", ""], // [107]
+ ["", ""], // [108]
+ ["-", ""], // [109]
+ [".", ""], // [110]
+ ["/", ""], // [111]
+
+ ["", ""], // [112]
+ ["", ""], // [113]
+ ["", ""], // [114]
+ ["", ""], // [115]
+ ["", ""], // [116]
+ ["", ""], // [117]
+ ["", ""], // [118]
+ ["", ""], // [119]
+ ["", ""], // [120]
+ ["", ""], // [121]
+ ["", ""], // [122]
+ ["", ""], // [123]
+ ["", ""], // [124]
+ ["", ""], // [125]
+ ["", ""], // [126]
+ ["", ""], // [127]
+ ["", ""], // [128]
+ ["", ""], // [129]
+ ["", ""], // [130]
+ ["", ""], // [131]
+ ["", ""], // [132]
+ ["", ""], // [133]
+ ["", ""], // [134]
+ ["", ""], // [135]
+ ["", ""], // [136]
+ ["", ""], // [137]
+ ["", ""], // [138]
+ ["", ""], // [139]
+ ["", ""], // [140]
+ ["", ""], // [141]
+ ["", ""], // [142]
+ ["", ""], // [143]
+ ["", ""], // [144]
+ ["", ""], // [145]
+ ["", ""], // [146]
+ ["", ""], // [147]
+ ["", ""], // [148]
+ ["", ""], // [149]
+ ["", ""], // [150]
+ ["", ""], // [151]
+ ["", ""], // [152]
+ ["", ""], // [153]
+ ["", ""], // [154]
+ ["", ""], // [155]
+ ["", ""], // [156]
+ ["", ""], // [157]
+ ["", ""], // [158]
+ ["", ""], // [159]
+ ["", ""], // [160]
+ ["", ""], // [161]
+ ["", ""], // [162]
+ ["", ""], // [163]
+ ["", ""], // [164]
+ ["", ""], // [165]
+ ["", ""], // [166]
+ ["", ""], // [167]
+ ["", ""], // [168]
+ ["", ""], // [169]
+ ["", ""], // [170]
+ ["", ""], // [171]
+ ["", ""], // [172]
+ ["", ""], // [173]
+ ["", ""], // [174]
+ ["", ""], // [175]
+ ["", ""], // [176]
+ ["", ""], // [177]
+ ["", ""], // [178]
+ ["", ""], // [179]
+ ["", ""], // [180]
+ ["", ""], // [181]
+ ["", ""], // [182]
+ ["", ""], // [183]
+ ["", ""], // [184]
+ ["", ""], // [185]
+ ["", ""], // [186]
+ ["=", "+"], // [187]
+ [",", "<"], // [188]
+ ["-", "_"], // [189]
+ [".", ">"], // [190]
+ ["/", "?"], // [191]
+ ["`", "~"], // [192]
+ ["", ""], // [193]
+ ["", ""], // [194]
+ ["", ""], // [195]
+ ["", ""], // [196]
+ ["", ""], // [197]
+ ["", ""], // [198]
+ ["", ""], // [199]
+ ["", ""], // [200]
+ ["", ""], // [201]
+ ["", ""], // [202]
+ ["", ""], // [203]
+ ["", ""], // [204]
+ ["", ""], // [205]
+ ["", ""], // [206]
+ ["", ""], // [207]
+ ["", ""], // [208]
+ ["", ""], // [209]
+ ["", ""], // [210]
+ ["", ""], // [211]
+ ["", ""], // [212]
+ ["", ""], // [213]
+ ["", ""], // [214]
+ ["", ""], // [215]
+ ["", ""], // [216]
+ ["", ""], // [217]
+ ["", ""], // [218]
+ ["[", "{"], // [219]
+ ["\\", "|"], // [220]
+ ["]", "}"], // [221]
+ ["'", '"'], // [222]
+ ["", ""], // [223]
+ ["", ""], // [224]
+ ["", ""], // [225]
+ ["", ""], // [226]
+ ["", ""], // [227]
+ ["", ""], // [228]
+ ["", ""], // [229]
+ ["", ""], // [230]
+ ["", ""], // [231]
+ ["", ""], // [232]
+ ["", ""], // [233]
+ ["", ""], // [234]
+ ["", ""], // [235]
+ ["", ""], // [236]
+ ["", ""], // [237]
+ ["", ""], // [238]
+ ["", ""], // [239]
+ ["", ""], // [240]
+ ["", ""], // [241]
+ ["", ""], // [242]
+ ["", ""], // [243]
+ ["", ""], // [244]
+ ["", ""], // [245]
+ ["", ""], // [246]
+ ["", ""], // [247]
+ ["", ""], // [248]
+ ["", ""], // [249]
+ ["", ""], // [250]
+ ["", ""], // [251]
+ ["", ""], // [252]
+ ["", ""], // [253]
+ ["", ""], // [254]
+ ["", ""] // [255]
+];
projects / mime-chat / commitdiff