JSFiddle - React, Tailwind, and code Playground
HTML
<button type="button" data-from="fieldset">Unbind from <fieldset></button><button type="button" data-from="body">Unbind from <body></button>
<fieldset>
<legend>Test area</legend>
<input type="text" id="txt">
<span></span>
<hr>
<textarea></textarea>
<span></span>
<hr>
<input type="range" id="range">
</fieldset>
<div>
<div id="bodycount"></div>
<div id="fieldsetcount"></div>
</div>
CSS
fieldset { margin: 10px; border: 1px solid black; padding:10px; }
textarea, input { float: left; }
hr { clear: left; padding-top:5px; border-width:0; border-bottom-width:1px; }
span { vertical-align: top; white-space: pre; }
JavaScript
$(function () {
var counts = { BODY: 0, FIELDSET: 0 };
$("body, fieldset").input(function (e) {
$("#"+this.tagName.toLowerCase()+"count")
.text(this.tagName + " triggered "+(++counts[this.tagName])+" times");
});
$("button").click(function () {
$($(this).data("from")).unbind("txtinput");
});
$("#range").change(function(){
//$("#txt").value($(this).value());
$("#txt").value($("#range").value());
});
});
/*
jQuery `input` special event v1.1
http://whattheheadsaid.com/projects/input-special-event
(c) 2010-2011 Andy Earnshaw
MIT license
www.opensource.org/licenses/mit-license.php
*/
(function($, udf) {
var ns = ".inputEvent ",
// A bunch of data strings that we use regularly
dataBnd = "bound.inputEvent",
dataVal = "value.inputEvent",
dataDlg = "delegated.inputEvent",
// Set up our list of events
bindTo = [
"input", "textInput", "propertychange", "paste", "cut", "keydown", "drop",
""].join(ns),
// Events required for delegate, mostly for IE support
dlgtTo = [ "focusin", "mouseover", "dragstart", "" ].join(ns),
// Elements supporting text input, not including contentEditable
supported = {TEXTAREA:udf, INPUT:udf},
// Events that fire before input value is updated
delay = { paste:udf, cut:udf, keydown:udf, drop:udf, textInput:udf };
$.event.special.txtinput = {
setup: function(data, namespaces, handler) {
var triggerTimer,
bndCount,
changeTimer,
// Get references to the element
elem = this,
$elem = $(this),
triggered = false;
if (elem.tagName in supported) {
bndCount = $.data(elem, dataBnd) || 0;
if (!bndCount)
$elem.bind(bindTo, handler);
...