Skip to main content
100%

Get a notification when a user starts and stops typing on the passed-in `el`.

✓ Published0🌍 Public
Aakre54
Last edited Apr 3, 2015
Created on Apr 3, 2015

This example demonstrates a utility for detecting when a user begins and ends typing in a given DOM element, triggering custom `start` and `stop` callback functions. It uses the native `addEventListener` API to listen for `keypress`, `keydown`, and `keyup` events, distinguishing backspace and delete keys from regular input. A configurable `delay` (defaulting to 400ms) controls the idle period before the `stop` notification fires, and the code avoids repeated `start` calls while typing continues. Written in CoffeeScript, the module exports a function that accepts the element and an options object.

AI-generated description

Similar vizzes

Loading thumbnail…

Related to https://twitter.com/timferro/status/705189339890843648 - notify when the user types in a certain word / sequence of chars

This example demonstrates a keyboard shortcut detector that triggers a callback when a user types a specific sequence of characters—here, the name “alexandru.” It shows how a browser can monitor keypresses in real time and react to a predefined pattern. The code uses a plain JavaScript `keydown` event listener on the document, storing key codes in an array and comparing the last entered keys against the target sequence. When the sequence matches, the callback logs a message to the console. No external libraries are used; the implementation relies solely on native DOM event handling.

Aalessioalex
62% match
Loading thumbnail…

JS Keyboard Interaction Test

This example demonstrates a bare-bones JavaScript keyboard interaction test, where the page’s body listens for `keydown` events and logs each pressed key’s value to the browser console. The rendering is minimal, using a CSS class for large centered text but no visual output beyond the console log. The code relies on the native DOM `EventListener` API on `document.body` and the `console.log` method, with no external libraries or frameworks. The interaction is limited to keyboard input, with no data source or chart rendering involved.

Pplueckeb@rptu.de
57% match
Loading thumbnail…

events

This example demonstrates how Backbone.js handles keyboard events within a textarea. Typing in the text field triggers a callback that logs a message to the browser console, showing event binding in action. The code defines a `PasteView` model that attaches `keyup`, `keydown`, and `keypress` handlers using Backbone’s `events` hash, with jQuery managing DOM interaction and Underscore providing utility functions like `bindAll`. No data source or rendering is involved—the focus is purely on event-driven interaction.

Aamundo
55% match
Loading thumbnail…

Gist 3e6254d26d7dbeebc0b0f0c822baee60

This React example presents a minimal typing-race interface, displaying a header and a text input field. The application records the user’s keystrokes into the component’s state, updating the displayed text in real time. It uses React’s `React.Component`, the `event.target.value` property for input handling, and logs the current state to the console. The example demonstrates a basic two-way binding between a controlled input and the component’s state, showing the typed text as the user types.

115Dkatz
54% match
Loading thumbnail…

debouncing input

This example demonstrates a debounced text input for search, showing how user keystrokes trigger an API request only after a pause in typing. It displays the typed text immediately in the input field while delaying the actual search request by 300 milliseconds. The React component uses the `useState` hook to manage both the displayed text and the debounced search value, while `useCallback` wraps lodash’s `debounce` function to stabilize the debounced callback. Each debounced input fires an Axios GET request to the provided `searchPath`, logging the response data to the console. The code illustrates the separation between immediate UI updates and delayed data fetching.

JJoshAddington
53% match
Loading thumbnail…

Gist 16f833f25c52e08f53e5255e4db05a2e

This example shows a real-time typing game where a user’s input is matched against a target text, displaying victory and elapsed time in milliseconds. The code uses React state and event handlers (`onChange`) to update the displayed text as the user types. It renders the current user input in an input field and shows a congratulatory message once the correct text is entered. The visualization relies on basic DOM updates rather than a charting library, focusing on interaction feedback through a simple JSX template.

115Dkatz
53% match
Loading thumbnail…

#javascript

This example demonstrates a JavaScript code editor that maintains focus and blur states for a text input area. The snippet configures event handlers for editor focus and focus loss, using a React component that passes `onEditorFocus` and `onEditorLoseFocus` callbacks through its props. It shows how the editor responds to user interaction by triggering these custom methods, which could update a visualization or UI state. The code relies on React’s event system and component props to manage the editor’s behavior, with no external libraries like d3 or Canvas involved.

GGugaGongadze
51% match
Loading thumbnail…

browsing tools dotjs snippets

This example shows a collection of JavaScript snippets that add keyboard and mouse shortcuts to specific websites, such as Forrst and Dribbble. It demonstrates how jQuery is used to bind click handlers to page elements, triggering navigation to the next paginated page, and how a custom keydown handler detects the Control key to open a Dribbble shot in a new window. The code relies on jQuery selectors and CSS properties to identify active elements, and it uses `document.location` for redirection. The snippets are designed for the dotjs browser extension, which injects user scripts into matching sites.

TTBD
51% match