こんにちは、だいちゃんです。

kintoneを使っていると、半角文字で入力する必要がある 数値・日付・日時・時刻フィールドに対して、全角で入力できちゃう問題がちょっとストレスだったので、強制的に半角に変換するJavaScriptカスタマイズを作成しました。

作成したJavaScriptファイルは、販売もしているので、よければどうぞ... 500円だよ...（宣伝下手）

半角自動変換カスタマイズ | udcstore

今回は、作成にあたって調べたことなどをまとめておこうと思います。

カスタマイズ概要

最初は、IME側のON/OFFを制御することを検討したのですが、現在は非推奨となっていたので、カーソルが外れたタイミングで、入力された値を半角に変換して、上書きしてあげる方法に行き着きました。

非推奨 element.style.imeMode で制御する方法

最初に検討した、全角文字を入力させないように制御する方法として、CSSの ime-mode というプロパティを制御することができそうでした。

ime-mode - CSS: カスケーディングスタイルシート | MDN

しかし、現在 非推奨 。これが使えれば、フォーカスが当たったタイミングで ime-mode を inactive にするだけで対応できそうだったんですが...。

入力文字を半角に変換する方法

気を取り直して、B案を。

一旦全角文字での入力を許可して、フィールドからフォーカスが外れたタイミングで入力された値を半角に変換して、値を上書きする処理を行うことにしました。

英数字に関しては、全角文字の文字コードから、 65248 を引くと、半角の文字コードが得られるようです。

const a1 = "Ａ";
console.log(a1.charCodeAt(0));
// 65313

const a2 = "A";
console.log(a2.charCodeAt(0));
// 65

ついでに、日付の区切り記号である - や / 、時刻の区切り記号である : 、数値の桁区切りである , や小数点の . も、全角で入力されてたら半角に置換してあげてます。

kintone 側のバリデーションとコンフリクトする

フォーカスが外れたタイミングで、入力文字を半角に変換したとしても、kinntone側のバリデーションが発火し、 日付の形式が不正です。 というエラーが表示されてしまう。

対策として、半角に変換後、kintone側のバリデーションチェックを再度発火させてあげることにしました。

// 日付・日時フィールドの場合
document.querySelector(`.value-${fieldId} .input-date-text-cybozu`).dispatchEvent(new Event('blur'));

// 時刻フィールドの場合
document.querySelector(`.value-${fieldId} .input-time-text-cybozu`).dispatchEvent(new Event('blur'));

なお、数値フィールドについては、バリデーションが発火しないので、上記の対応は不要です。

そんなこんなで作ったカスタマイズを適用することで、数値・日付・日時・時刻フィールドに全角文字で入力しちゃっても、自動的に半角に置き換えてくれるようになりました。

便利そうに感じてくれたら、この記事を参考に自作するなり、 ここで買うなり してみてください。