JSFiddle - React, Tailwind, and code Playground

by Seungrae Lee

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<label for="email">e-mail:</label>
<input type="text" name="email" size="20">
<br />
<label for="content">content:</label>
<br />
<textarea name="content" style="width:300px; height:200px;"></textarea>
<br />
<label for="lname">readonly text:</label>
<input type="text" name="lname" size="20" readonly="readonly" value="john lennon">

JavaScript

(function(factory) {
  if (typeof define === "function" && define.amd) {
    define(["jquery"], factory);
  } else {
    factory(jQuery);
  }
}(function($) {
  $.fn.extend({
    // block pressed key's action
    blockkey: function() {
      this.bind('keydown', function(e) {
        var tag = e.target.nodeName.toLowerCase(),
          type = e.target.type,
          $target = $(e.target);

        // block backspace
        if (e.keyCode == $.ui.keyCode.BACKSPACE) {

          if ((tag == 'input' && type == 'text') || tag == 'textarea') {
            if (!$target.attr('readonly') && !$target.is(':disabled')) {
              return true;
            }
          }
          return false;
        }
        return true;
      });

    }
  });
}));

$(function() {
  $(document).blockkey();
}); //onload event