JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<script src="https://raw.githubusercontent.com/dodo/jquery-inputevent/master/jquery.inputevent.js"></script>
<input type="text" id="txtTest" />
<input type="button" id="btnClear" value="clear" />
<input type="button" id="btnShow" value="show" />

<ul id="dvLog"></ul>

CSS

ul {
  font-size: 9pt;
  margin-top: 10px;
}

JavaScript

var $log = $("#dvLog");


$("#txtTest")
  .bind("keypress", keyPress)
  .bind("keydown", keyDown)
  .bind("input", dataInput);

$("#btnClear").click(function() {
  $log.empty();
  $("#txtTest").val("");
});

$("#btnShow").click(function() {
  alert($("#txtTest").val());
});



function keyPress(e) {
  $log.append("<li>KeyPress: " + e.which + "</li> ");
}

function keyDown(e) {
  $log.append("<li>KeyDown: " + e.which + "</li> ");
}

function dataInput(e) {
  $log.append("<li>Input!</li> ");
  console.log($("#txtTest").val());
}