<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <h3>Press Enter inside a form field to see the effect</h3>
    <p>Each press should be replaced with a consecutive number in braces.</p>
    <textarea id="textarea" cols="30" rows="10"></textarea>
    <br><br>
    <input type="text" id="text">
    <script src="dist/index.umd.js"></script>
    <script>
        /** @this {HTMLElement} */
        function indicateChange (input) {
          input.style.borderColor = 'green';
          input.style.borderWidth = '1px';
          input.style.borderStyle = 'solid';
          clearTimeout(input._timeout);
          input._timeout = setTimeout(function() {
            input.style.borderColor = '';
            input.style.borderWidth = '';
            input.style.borderStyle = '';
          }, 1000);
        }

        /** @this {HTMLElement} */
        function replaceEnter(e) {
          this._counter = this._counter || 0;
          if (e.keyCode === 13) {
            e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            insertTextAtCursor(this, '{' + (this._counter++) + '}');
          }
        }

        /** @param {HTMLElement} input */
        function setup (input) {
          input.onkeypress = function (e) {
            replaceEnter.call(input, e || window.event);
          };
          if ('oninput' in input) {
            input.oninput = function () {
              indicateChange(input);
            };
          } else {
            input.onchange = function () {
              indicateChange(input);
            };
          }
        }

        setup(document.getElementById('textarea'));
        setup(document.getElementById('text'));
    </script>
</body>
</html>