Virtual keyboard doesn't appear on Ankidroid

Anki Card Design
1

After hours of trying and researching, I gave up …

I don’t want to use the normal Anki input field ({{type:xxx}}), I’d rather like to design my own input field using Bootstrap like this

<div class="d-flex justify-content-center section" style="height: 100px;">
  <div class="input-group mb-3 input-group-sm rounded-pill overflow-hidden border w-50 my-auto">
    <input type="text" class="form-control hide-focus border-0" placeholder="...." aria-label="Username"
      style="height: 40px; font-size: 20px;" tabindex="1">
  </div>
</div>

Details:

  • Android 13
  • Ankidroid 2.19.2

I’m able to focus my input field, but the virtual keyboard doesn’t appear - “Settings > Advanced > Type answer into the card” is turned on as described here.

Below’s what I`ve tried so far using Javascript code … combinations of proposals I found on MDN, stackoverflow and got from consulting the Codeium AI … nothing works.

It must be my mistake - can you give me any hint what’s wrong with my code?

Kind regards, Frank

<script>
  // Get the input field element
  const inputField = document.querySelector('input.form-control');

  // Set the focus on the input field
  inputField.focus();

  // Programmatically trigger the keyboard to appear by simulating a key press event
  inputField.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
  requestAnimationFrame(() => {
    console.log("**** requestAnimationFrame ****");
    inputField.focus();
  });
  document.addEventListener('click', () => {
    if ("virtualKeyboard" in navigator) {
      console.log("**** focus ****");
      navigator.virtualKeyboard.show();
    }
  });
  inputField.addEventListener('focus', () => {
    if ("virtualKeyboard" in navigator) {
      console.log("**** focus ****");
      navigator.virtualKeyboard.show();
    }
  });
  console.log(document.activeElement);
  // Assign an event handler to the input field
  inputField.addEventListener('keydown', (event) => {
    // Handle the key press event
    console.log(`Key pressed => ${event.key}`);
    if (event.keyCode === 13) {
      // Handle the Return key press
      console.log('Return key pressed!');
    }
  });
  // function onPageFinished() {
  //   console.log("**** onPageFinished ****");
  //   var typedElement = document.querySelector("[name='typed']");
  //   if (typedElement) {
  //     typedElement.addEventListener("focus", taFocus);
  //   }
  //   // ...
  // }
  // onPageFinished();
</script>
2

I haven’t worked with managing the virtual keyboard in JS before but here’s some possible ideas that look like you haven’t tried yet:

  • From VirtualKeyboard API - Web APIs | MDN
    • Adding contenteditable attribute to the <input> should enable the virtual keyboard to appear automatically without needing to manually trigger it
    • Or if that didn’t work, navigator.virtualKeyboard.show() seems to require setting virtualkeyboardpolicy="manual" which is not set in your current HTML
1 Like
3

I have to thank you a thousand times for this!

I was ruminating and ruminating :slight_smile:

With those proposals it works as desired … below my working HTML code.

<div class="d-flex justify-content-center section" style="height: 100px;">
  <div class="input-group mb-3 input-group-sm rounded-pill overflow-hidden border w-50 my-auto">
    <input virtualkeyboardpolicy="manual" contenteditable type="text" class="form-control hide-focus border-0"
      placeholder="...." aria-label="Username" style="height: 40px; font-size: 20px;" tabindex="1">
  </div>
</div>