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:
Top comments (0)