A jquery plugin to determine when a user has stopped typing in a text field.

Overview

The official home for the TypeWatch jQuery plugin.

CDNJS

TypeWatch calls a function when a user has typed text in an input, textarea and changes in div from editors (including HTML 5 input types) and after the user has stopped typing for a specified amount of time.

Note* This is not the OnChange event, instead the function is called after the user has finished typing (or if the user stopped typing for # amount of milliseconds) even if the input continues to have focus.

This can be used in conjunction with an AutoComplete implementation, so instead of firing an AJAX call every 500 ms, you can fire it once when they’ve stopped typing.

Now supports HTML 5 oninput event for browsers that support it

Example:

// callback: The callback function
// wait: The number of milliseconds to wait after the the last key press before firing the callback
// highlight: Highlights the element when it receives focus
// allowSubmit: Allows a non-multiline element to be submitted (enter key) regardless of captureLength
// captureLength: Minimum # of characters necessary to fire the callback

var options = {
    callback: function (value) { console.log('TypeWatch callback: (' + (this.type || this.nodeName) + ') ' + value); },
    wait: 750,
    highlight: true,
    allowSubmit: false,
    captureLength: 2
}

$("#search").typeWatch( options );
  • When working with any element other than TEXTAREA pressing the ENTER key will fire the callback function.
  • When working with any editor which supports DIV it works like a textarea.
  • The cut and paste events are also included.

Works with multiple elements:

$(".textbox,input,textarea,#search").typeWatch( options );

Lastly, if you use or enjoy TypeWatch beer donations are always appreciated

Donate a beer, half a beer, or a 6-pack

Comments
  • publish on NPM

    publish on NPM

    v.2.2.0 is in bower but not on NPM (someone else seems to have forked and created the unofficial NPM module and still has "official" in the readme)

    https://www.npmjs.com/package/jquery.typewatch

    Can you publish this one?

    opened by davidosomething 5
  • Suggestion: Handle data length reductions

    Suggestion: Handle data length reductions

    There are two common cases (actually two derivatives of the same case, that just feel different) that would be nice to see handled by this plugin:

    1. Full erase. Type some data, Shift+Home, Backspace. This case is when you've typed and then erased everything. The callback doesn't fire, and thus you can't restore state. (I'm using this to trigger a filter on a table of data, and a full erase should restore all data).
    2. with captureLength set to 3, type 3 chars, let event fire, then backspace. This case should also be able to let the user restore default state, since 2 characters are considered the same as no characters, but the callback won't fire because the input has only 2 characters.

    These are really both the same case: when the data length decreases from over the captureLength setting, to under the captureLength setting.

    opened by scoman81 5
  • [enhancement] Add missing bower.json.

    [enhancement] Add missing bower.json.

    Hey, maintainer(s) of dennyferra/TypeWatch!

    We at VersionEye are working hard to keep up the quality of the bower's registry.

    We just finished our initial analysis of the quality of the Bower.io registry:

    7530 - registered packages, 224 of them doesnt exists anymore;

    We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

    Sadly, your library dennyferra/TypeWatch is one of them.

    Can you spare 15 minutes to help us to make Bower better?

    Just add a new file bower.json and change attributes.

    {
      "name": "dennyferra/TypeWatch",
      "version": "1.0.0",
      "main": "path/to/main.css",
      "description": "please add it",
      "license": "Eclipse",
      "ignore": [
        ".jshintrc",
        "**/*.txt"
      ],
      "dependencies": {
        "<dependency_name>": "<semantic_version>",
        "<dependency_name>": "<Local_folder>",
        "<dependency_name>": "<package>"
      },
      "devDependencies": {
        "<test-framework-name>": "<version>"
      }
    }
    
    

    Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

    NB! Please validate your bower.json with jsonlint before commiting your updates.

    Thank you!

    Timo, twitter: @versioneye email: [email protected] VersionEye - no more legacy software!

    opened by timgluz 4
  • Destroy typewatch?

    Destroy typewatch?

    Hi There,

    Short story I'm currently implement type watch input text on a boostrap modal. This modal has two trigger button, if I execute any button, typewatch only work on the first button that I was execute. I dont know exaclty whats going on. So, I decided want to try destroying typeWatch first and then revoke while modal shown.

    Anyone can tell me how to destroy typewatch?

    thanks

    no-issue-activity 
    opened by drosanda 3
  • Check license

    Check license

    Hi @dennyferra , We are cdnjs team, we want to host this library on cdnjs. The comment in jquery.typewatch.js show that under dual licenses. Could you please help me check which version of GPL license you use? or point out from license-list.json. Thanks.

    https://github.com/cdnjs/cdnjs/pull/8022 https://github.com/cdnjs/cdnjs/issues/7848

    opened by pvnr0082t 3
  • Dynamic elements

    Dynamic elements

    Hi, I am creating dynamic text inputs with ajax, then I am trying to call typewatch on their ID, but nothing happens.

    Am I doing something wrong? $("#new_element").typeWatch( options );

    It works fine on static inputs

    Thank you for help

    opened by ghost 3
  • Event does not trigger when just using the mouse

    Event does not trigger when just using the mouse

    I have a text field which when clicked on shows previously typed in text (default browser behaviour). The problem is if you click in the text field and then click one of the words, the callback function never gets triggered.

    If you are on the previous field and press tab, down, down, tab (select the first item in the list and tab to the next field) then everything works fine so it's just an issue with mouse support.

    opened by KevinUK 3
  • Same input

    Same input

    If you type twice the same input, typeWatch does not fire. Example here: https://www.jqueryscript.net/demo/jQuery-Plugin-To-Run-A-Function-When-User-Stops-Typing-TypeWatch/ Type in "Email address" the value 'xy': typeWatch fires. After that, select value and type again 'xy': typeWatch does not fire.

    no-issue-activity 
    opened by jsDeb 2
  • 'Captute length is zero and changed value' causing website to lock up

    'Captute length is zero and changed value' causing website to lock up

    We use this plugin on a 'quick search' function on a website with a minimum length set. The function being called is doing an AJAX query on a PHP file to get data out from the database. When a user enters something in to this quick search and realize they typed something wrong after it has searched, they clear out what they have entered. Before they start typing again, after 750ms, the function is being called due to the capture length being 0 and the value is now different. This is now calling AJAX on a PHP file which is ultimately searching the whole database due to using 'LIKE' queries.

    I'm not sure on what the purpose of line 46 in the JS file is for, but we had to comment it out for our use.

    no-issue-activity 
    opened by GeorgeWells 2
  • Use nodejs dependency injection to pass jQuery object instead of window.$

    Use nodejs dependency injection to pass jQuery object instead of window.$

    Hello

    I'm trying to inject jQUery as a dependency in the typewatch plugin but it does not works...

    var $ = require("jquery");
    require('jquery.typewatch', {'jQuery': $});
    

    I'm forced to works with the window object, what is not cool if I want to use multiple jQuery version.

    window.$ = require("jquery");
    require('jquery.typewatch');
    

    Any advice?

    no-issue-activity 
    opened by david-vde 2
  • Uncaught TypeError: Cannot read property 'toLowerCase'

    Uncaught TypeError: Cannot read property 'toLowerCase'

    Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
        at jQuery.fn.init.val (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:8201)
        at applicationUsersRegisterIndexValidateUsername (index.self-1ec7504e1c62604622326b3b5cb2feeaaf573eaf947a783c2b32784ce33aa2d2.js:27)
        at HTMLInputElement.callback (index.self-1ec7504e1c62604622326b3b5cb2feeaaf573eaf947a783c2b32784ce33aa2d2.js:10)
        at checkElement (jquery.typewatch.self-c0e2658d2eb4075588545012bae9e075cce3c801af9b0720461d040daa5e5184.js:50)
        at timerCallbackFx (jquery.typewatch.self-c0e2658d2eb4075588545012bae9e075cce3c801af9b0720461d040daa5e5184.js:88)
    

    Issue seems to be in jquery.typewatch.js:50 or jquery.typewatch.js:88

    opened by jonhue 2
  • Fix problem when using typewatch with JSF and AJAX

    Fix problem when using typewatch with JSF and AJAX

    In JSF, when AJAX is called, the jquery-plugins need to be restarted everytime (using jsf.ajax.addOnEvent) and it cause problem in typewatch plugin, because events (keydown, paste,cut and input) are called multiple times. So, if this event hit a database, the database is called multiple times causing a lot of problems (poor performance application).

    To solve it, i added a name for each event (keydown.typewatch, paste.typewatch ...), and you can unbind just this event to restart typewatch, like this code:

    $(document).ready(function () {
    jsf.ajax.addOnEvent(restartTypewatch);
    });
    
    function restartTypewatch(){
    //unbind all events to avoid multiple calls
    $('#my-input-text').unbind('keydown.typewatch paste.typewatch cut.typewatch input.typewatch');
    
    //start typeWatch again
    $('#my-input-text').typeWatch(options);
    }
    
    

    You can't unbind all "keydown" events because it will cause problems in another jquery-plugins, like this:

    
    //unbind all keydown in this component can cause problem in others plugins, better unbind just typewatch
    $('#my-input-text').unbind('keydown');
    
    
    opened by rlanhellas 0
  • Make available as a jQuery event

    Make available as a jQuery event

    It would be nice if this plugin were to extend the existing jQuery events, so that the following can be done:

    $('#someInput').on('donetyping', handler);
    

    Check https://learn.jquery.com/events/event-extensions for a walkthrough or https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js for an example implementation.

    enhancement 
    opened by gentisaliu 1
Releases(v3.0.2)
Owner
Denny Ferrassoli
Denny Ferrassoli
This plugin integrates by default with Twitter bootstrap using badges to display the maximum lenght of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

Bootstrap MaxLength This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is

Maurizio 772 Dec 25, 2022
An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Okoye Charles 14 Oct 3, 2022
A minimal typing practice website with no features except typing. Inspired from Monkeytype. Do ⭐ this repository.

SenpaiType Introduction SenpaiType is a minimal typing practice website with no features except typing. Inspired from Monkeytype. Contributing Raise i

Pruthviraj Jadhav 5 Nov 30, 2022
A Jquery plugin that allows user to enter multiple emails using one input field

multi-emails A Jquery plugin that allows user to enter multiple emails using one input field Usage $("...").multiEmails() Options color textColor font

null 1 Aug 26, 2022
Determine o fuso horário no Brasil de acordo com o Estado ou Cidade

Fusos horários BR Determine o fuso horário no Brasil de acordo com o Estado ou Cidade. Atualmente o Brasil observa quatro fusos horários1, mas os seus

Aryel Mota Góis 1 Jan 21, 2022
Format input text content when you are typing...

Cleave.js Cleave.js has a simple purpose: to help you format input text content automatically. Features Credit card number formatting Phone number for

Max Huang 17.6k Dec 29, 2022
A plugin for Strapi that provides the ability to auto slugify a field for any content type

strapi-plugin-slugify A plugin for Strapi that provides the ability to auto slugify a field for any content type. It also provides a findOne by slug e

daedalus 25 Nov 28, 2022
🛠 Highly customisable, minimalistic input x select field for React.

Insect ?? Highly customisable, minimalistic input x select field for React. ⚡️ Features Tiny size (~4kb Gzip) 100% responsive. Highly customisable. Su

Kadet 32 Oct 29, 2022
This web application is a type of a scoreboard showing the names and current scores of the leading competitors in any field which is using API's to get and set data

Leaderboard-project This web application is a type of a scoreboard showing the names and current scores of the leading competitors in any field which

Ravi Teja 5 Feb 11, 2022
Service Installer for VMware Tanzu is a one-click automation solution that enables VMware field engineers to easily and rapidly install, configure, and operate VMware Tanzu services across a variety of cloud infrastructures.

Service Installer for VMware Tanzu Service Installer for VMware Tanzu seeks to provide a one-click automation solution to enable our VMware engineers

VMware Tanzu 42 Dec 1, 2022
Email Genie Allows autocomplete on email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.).

Allows users to easily and quickly complete an email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package stands out for its flexibility, its compatibility with libraries / frameworks, but especially its use of basic HTML and Javascript functionalities that maximize the native behavior of desktop AND mobile browsers.

Simon Arnold 3 Oct 4, 2022
Obsidian text generator Plugin Text generator using GPT-3 (OpenAI)

is a handy plugin for Obsidian that helps you generate text content using the powerful language model GP

null 356 Dec 29, 2022
Obsidian plugin: Type text shortcuts that expand into javascript generated text.

Obsidian Plugin - Text Expander JS (open beta) This Obsidian plugin allows the user to type text shortcuts that are replaced by (or "expanded into") j

Jon Heard 79 Dec 27, 2022
A simple Todo app to add list of books a user has read using HTML, CSS, Webpack, JavaScript and modular architecture

Minimalist A simple Todo app to add list of books a user has read. It is implemented using HTML, CSS, Webpack, JavaScript and modular architecture. A

Elikplim 4 May 9, 2022
A simple extension that shows how many days a user has left until the date of the deadline

A simple extension that shows how many days a user has left until the date of the deadline

Mohamed Haddi 10 Nov 18, 2022
Hadmean is an internal tool generator. It is language agnostic, schema driven, extremely customizable, featured packed, user-friendly and has just one installation step.

Hadmean Report a Bug · Request a Feature · Ask a Question Table of Contents About Quick Demo Motivation Why you should try Hadmean Getting Started Pre

Hadmean 344 Dec 29, 2022
A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

Arhun Saday 34 Dec 12, 2022