select

Better select widgets in vanilla javascript.  https://p.ce9e.org/select/demo/
git clone https://git.ce9e.org/select.git

commit
39ea81e063ddcc4b1f74ab588d4359c669582fcd
parent
9dd9a29614ded627cb62a17fbf2d38a748453aa3
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2025-09-02 06:10
stop using deprecated keyCode

Diffstat

M select.js 18 +++++++++---------
M tags.js 4 ++--
M utils.js 10 ----------

3 files changed, 11 insertions, 21 deletions


diff --git a/select.js b/select.js

@@ -1,4 +1,4 @@
    1    -1 import { KEYS, randomString, create } from './utils.js';
   -1     1 import { randomString, create } from './utils.js';
    2     2 import { Values } from './values.js';
    3     3 
    4     4 export class Select {
@@ -197,34 +197,34 @@ export class Select {
  197   197 
  198   198 	onkeydown(event) {
  199   199 		if (this.focus !== -1) {
  200    -1 			if (event.keyCode === KEYS.DOWN) {
   -1   200 			if (event.key === 'ArrowDown') {
  201   201 				event.preventDefault();
  202   202 				this.moveFocus(1);
  203    -1 			} else if (event.keyCode === KEYS.PAGE_DOWN) {
   -1   203 			} else if (event.key === 'PageDown') {
  204   204 				event.preventDefault();
  205   205 				this.moveFocus(10);
  206    -1 			} else if (event.keyCode === KEYS.UP) {
   -1   206 			} else if (event.key === 'ArrowUp') {
  207   207 				event.preventDefault();
  208   208 				this.moveFocus(-1);
  209    -1 			} else if (event.keyCode === KEYS.PAGE_UP) {
   -1   209 			} else if (event.key === 'PageUp') {
  210   210 				event.preventDefault();
  211   211 				this.moveFocus(-10);
  212    -1 			} else if (event.keyCode === KEYS.ENTER) {
   -1   212 			} else if (event.key === 'Enter') {
  213   213 				if (this.indexMap.length) {
  214   214 					event.preventDefault();
  215   215 					this.setValue(this.indexMap[this.focus]);
  216   216 				}
  217    -1 			} else if (event.keyCode === KEYS.ESC) {
   -1   217 			} else if (event.key === 'Escape') {
  218   218 				this.input.value = '';
  219   219 				this.close();
  220   220 			}
  221   221 		} else {
  222    -1 			if (event.keyCode === KEYS.DOWN) {
   -1   222 			if (event.key === 'ArrowDown') {
  223   223 				event.preventDefault();
  224   224 				this.open(true);
  225   225 			}
  226   226 		}
  227    -1 		if (this.original.multiple && !this.input.value && event.keyCode === KEYS.BACKSPACE) {
   -1   227 		if (this.original.multiple && !this.input.value && event.key === 'Backspace') {
  228   228 			event.preventDefault();
  229   229 			var n = this.original.selectedOptions.length;
  230   230 			if (n) {

diff --git a/tags.js b/tags.js

@@ -1,4 +1,4 @@
    1    -1 import { KEYS, randomString, create } from './utils.js';
   -1     1 import { randomString, create } from './utils.js';
    2     2 import { Values } from './values.js';
    3     3 
    4     4 export class TagInput {
@@ -77,7 +77,7 @@ export class TagInput {
   77    77 	}
   78    78 
   79    79 	onkeydown(event) {
   80    -1 		if (event.keyCode === KEYS.BACKSPACE) {
   -1    80 		if (event.key === 'Backspace') {
   81    81 			if (!this.input.value) {
   82    82 				event.preventDefault();
   83    83 				var n = this.original.selectedOptions.length;

diff --git a/utils.js b/utils.js

@@ -1,15 +1,5 @@
    1     1 var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    2     2 
    3    -1 export var KEYS = {
    4    -1 	BACKSPACE: 8,
    5    -1 	ENTER: 13,
    6    -1 	ESC: 27,
    7    -1 	PAGE_UP: 33,
    8    -1 	PAGE_DOWN: 34,
    9    -1 	UP: 38,
   10    -1 	DOWN: 40,
   11    -1 };
   12    -1 
   13     3 export var randomString = function(length) {
   14     4 	var result = [];
   15     5 	for (var i = 0; i < length; i++) {