JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<input type="text" id="myTextbox" placeholder="Type something here...">

<script>
  document.getElementById('myTextbox').addEventListener('input', function(event) {
    const currentValue = event.target.value;
    console.log('Current value:', currentValue);
    
    // Detecting text deletion
    // Note: This is a simple way to detect if text was deleted but it might not cover all cases.
    if (this.oldValue !== undefined && currentValue.length < this.oldValue.length) {
      console.log('Text was deleted');
    }
    
    this.oldValue = currentValue;
  });
</script>

</body>
</html>