JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text">
<div></div>
JavaScript
$(function () {
$("input").bind("input", function (e) {
$(this).next().text(this.value)
});
});
(function($) {
// Handler for propertychange events only
function propHandler () {
var $this = $(this);
if (window.event.propertyName == "value" && !$this.data("triggering.inputEvent")) {
$this.data("triggering.inputEvent", true).trigger("input");
window.setTimeout(function () {
$this.data("triggering.inputEvent", false);
}, 0);
}
}
$.event.special.input = {
setup: function(data, namespaces) {
var timer,
// Get a reference to the element
elem = this,
// Store the current state of the element
state = elem.value,
// Create a dummy element that we can use for testing event support
tester = document.createElement(this.tagName),
// Check for native oninput
oninput = "oninput" in tester || checkEvent(tester),
// Check for onpropertychange
onprop = "onpropertychange" in tester,
// Generate a random namespace for event bindings
ns = "inputEventNS" + ~~(Math.random() * 10000000),
// Last resort event names
evts = ["focus", "blur", "paste", "cut", "keydown", "drop", ""].join("."+ns+" ");
function checkState () {
var $this = $(elem);
if (elem.value != state && !$this.data("triggering.inputEvent")) {
state = elem.value;
$this.data("triggering.inputEvent", true).trigger("input");
window.setTimeout(function () {
$this.data("triggering.inputEvent", false);
}, 0);
}
}
// Set up a function to handle the different events that may...