npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

kd-keysim

v2.1.2

Published

Keyboard simulator for JavaScript.

Downloads

3

Readme

keysim.js

Simulate typing into DOM elements. This can be used anywhere you need to simulate user keystrokes, but is particularly useful in testing environments.

build status

Installation

# Install via npm to use with a web or node (e.g. with jsdom) project.
$ npm install [--save-dev] keysim
# Install by copying the dist file.
$ git clone https://github.com/eventualbuddha/keysim.js.git
$ cp keysim.js/dist/keysim.js path/to/vendor/keysim.js

Usage

There are two high-level methods for simulating keystrokes on a DOM element, one for typing input into an element and one for typing non-input "action" keystrokes. Note that none of the methods provided by keysim will trigger the browser's default behavior, such as inserting text or moving the cursor. It only allows you to test your event handling code by sending the correct DOM events.

Entering Text

Get a standard keyboard and use it to fire events onto a DOM element:

let input = document.getElementById('name');
let keyboard = Keysim.Keyboard.US_ENGLISH;
keyboard.dispatchEventsForInput('hello!', input);

This will fire events keydown, keypress, keyup, and textInput events for each typed character in the input string. In addition, some characters may require modifier keys in order to type. The keydown and keyup events will be fired for these modifier keys (e.g. the SHIFT key) as appropriate. 1

Triggering Special Actions

It is also sometimes useful to simulate special keys, or actions that do not cause input. For example, here's how to simulate backward deleting a word and selecting all text in the input:

let input = document.getElementById('name');
let keyboard = Keysim.Keyboard.US_ENGLISH;
keyboard.dispatchEventsForAction('alt+backspace', input);
keyboard.dispatchEventsForAction(`${osx ? 'meta' : 'ctrl'}+a`, input);

Raw Keystroke Dispatch

If you need to dispatch events for an exact sequence of keystrokes you may use Keyboard#dispatchEventsForKeystroke, which is used by both Keyboard#dispatchEventsForInput and Keyboard#dispatchEventsForAction.

let input = document.getElementById('name');
let keyboard = Keysim.Keyboard.US_ENGLISH;
let ctrl_shift_enter = new Keysim.Keystroke(
  Keysim.Keystroke.CTRL | Keysim.Keystroke.SHIFT,
  13
);
keyboard.dispatchEventsForKeystroke(ctrl_shift_enter, input);

1 Here is the complete set of events fired (as reported by this page):

keydown  keyCode=72  (H)   which=72  (H)   charCode=0        
keypress keyCode=104 (h)   which=104 (h)   charCode=104 (h)  
textInput data=h
keyup    keyCode=72  (H)   which=72  (H)   charCode=0        
keydown  keyCode=69  (E)   which=69  (E)   charCode=0        
keypress keyCode=101 (e)   which=101 (e)   charCode=101 (e)  
textInput data=e
keyup    keyCode=69  (E)   which=69  (E)   charCode=0        
keydown  keyCode=76  (L)   which=76  (L)   charCode=0        
keypress keyCode=108 (l)   which=108 (l)   charCode=108 (l)  
textInput data=l
keyup    keyCode=76  (L)   which=76  (L)   charCode=0        
keydown  keyCode=76  (L)   which=76  (L)   charCode=0        
keypress keyCode=108 (l)   which=108 (l)   charCode=108 (l)  
textInput data=l
keyup    keyCode=76  (L)   which=76  (L)   charCode=0        
keydown  keyCode=79  (O)   which=79  (O)   charCode=0        
keypress keyCode=111 (o)   which=111 (o)   charCode=111 (o)  
textInput data=o
keyup    keyCode=79  (O)   which=79  (O)   charCode=0        
keydown  keyCode=16        which=16        charCode=0        
keydown  keyCode=49  (1)   which=49  (1)   charCode=0        
keypress keyCode=33  (!)   which=33  (!)   charCode=33  (!)  
textInput data=!
keyup    keyCode=49  (1)   which=49  (1)   charCode=0        
keyup    keyCode=16        which=16        charCode=0        
keydown  keyCode=91  ([)   which=91  ([)   charCode=0        

Building

Ensure that the keysim dependencies are installed (npm install). Then run npm run build to re-create dist/keysim.js.

Testing

To run the tests in Chrome, run npm run test:browser. To run the tests in node, run npm run test:node. Running npm test will run both.

Contributing

Fork the project, create a branch, and fix your bug or add your feature on that branch. Be sure to add tests for your bug fix or feature.