Typing with different Input Methods on the web - Keywrite

Keywrite is a JavaScript library that allows you to type non-latin scripts in any web based application using a standard keyboard. You can use it to type in any language without having to configure your operating system or installing a virtual keyboard software.

Keywrite supports dynamically changing between input-methods during runtime. This feature can become useful if we want users to choose from a selection of input methods.

For this demo we will be using the pre-made input-methods defined in the @keywrite/ethiopic-input-methods package. It is also possible to define your own input method. Read the Docs to know more about input-methods.

We will use a text-input and a textarea for this demo. We will also add an input-method selector and an on/off button for each field.

We can enable/disable the Keywrite instance by modifying the on property:

const addToggle = (instance: KeywriteWeb, btnId: string) => {
  const id = `#${btnId}`;
  const btn = document.querySelector(id);
  if (btn) {
    btn.addEventListener("click", () => {
      instance.on = !instance.on;
      btn.classList.add("btn", "mb-3");
      if (instance.on) {
        btn.classList.add("btn-success");
        btn.classList.remove("btn-danger");
      } else {
        btn.classList.remove("btn-success");
        btn.classList.add("btn-danger");
      }
      btn.innerHTML = `${instance.on ? "ON" : "OFF"}`;
    });
  }
};

Input-methods can also be changed by setting the current property to the name of the input-method we want:

const addIMSelect = (instance: KeywriteWeb, selectId: string) => {
  const id = `#${selectId}`;
  const select: HTMLSelectElement | null = document.querySelector(id);
  if (select) {
    select.addEventListener("change", (e) => {
      const value = (e.target as HTMLSelectElement).value;
      instance.current = value;
    });
  }
};

Checkout this sandbox for the complete demo: