Custom html prompt window: press button lose input filed focus

Questions & Suggestions
1

With the help of AI, I can quickly create a html prompt window with a certain degree of complexity, but due to the lack of coding knowledge, many problems are difficult to solve. In addition, in the keyboard maestro environment, it seems that the running of html code is different, which also makes it difficult to find answers to questions on the Internet.
Now I want to make an array of text input boxes, arranged in 3x2. 3 columns, 2 rows, a total of 6. Then there is a delete key and a cancel key on the window. The logic I want is that when the delete key is pressed, the window may have a text box in an activated state, and a cursor flashing in it. After pressing the delete key, the characters in the text input box in the editing state can be deleted. But there is a problem, please see the demonstration code below.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 20px;
      font-family: sans-serif;
    }
    #inputContainer {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .inputField {
      width: 300px;
      padding: 8px;
      font-size: 16px;
    }
    #deleteBtn {
      margin-left: 10px;
      padding: 8px 12px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <!-- inputContainer -->
  <div id="inputContainer">
    <input type="text" id="inputField1" class="inputField" placeholder="…" />
    <input type="text" id="inputField2" class="inputField" placeholder="…" />
  </div>
  
  <button id="deleteBtn">Delete</button>

  <script>
    const input1 = document.getElementById('inputField1');
    const input2 = document.getElementById('inputField2');
    const delBtn = document.getElementById('deleteBtn');

    delBtn.addEventListener('click', () => {
      const activeInput = document.activeElement; 
      if (activeInput && activeInput.tagName.toLowerCase() === 'input') {
        const pos = activeInput.selectionStart; 
        if (pos > 0) {
          const v = activeInput.value;
          activeInput.value = v.slice(0, pos - 1) + v.slice(pos);
          activeInput.setSelectionRange(pos - 1, pos - 1);
          activeInput.focus();
        }
      }
    });

    input1.addEventListener('keydown', e => {
      if (e.key === 'Enter') {
        window.keyboardMaestro.submit(input1.value);
      }
    });
    
    input2.addEventListener('keydown', e => {
      if (e.key === 'Enter') {
        window.keyboardMaestro.submit(input2.value);
      }
    });
  </script>
</body>
</html>

Because there are multiple text boxes, these text boxes must be put into a container. After using the container, when we click the delete button, the text box that was originally in the editing state will lose focus. As a result, the delete key cannot delete the characters correctly. If you go back to a single text input box, this problem does not exist. Please see the demonstration code below.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 20px;
      font-family: sans-serif;
    }
    #inputField {
      width: 300px;
      padding: 8px;
      font-size: 16px;
    }
    #deleteBtn {
      margin-left: 10px;
      padding: 8px 12px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <input type="text" id="inputField" placeholder="…" />
  <button id="deleteBtn">Delete</button>

  <script>
    const input = document.getElementById('inputField');
    const delBtn = document.getElementById('deleteBtn');

    delBtn.addEventListener('click', () => {
      const pos = input.selectionStart;
      if (pos > 0) {
        const v = input.value;
        input.value = v.slice(0, pos - 1) + v.slice(pos);
        input.setSelectionRange(pos - 1, pos - 1);
        
      }
    });

    input.addEventListener('keydown', e => {
      if (e.key === 'Enter') {
        window.keyboardMaestro.submit(input.value);
      }
    });
  </script>
</body>
</html>

I searched online for this, but couldn't find the right answer. Hope this helps.
html prompt - delete function.kmmacros (6.7 KB)

2

Tell the AI that you don't want the button to steal focus. IIRC, instead of the "click" event, you'd use something like "mousedown" and use event.preventDefault() or something like that.

1 Like