2020年2月7日
historykanaのinstall
npm install historykana
component.tsでの実装
import * as historyKana from 'historykana';
history: string[] = [];
kana = '';
public onInput(value: string){
if(value === '')
{
this.history = [];
}
else
{
this.history.push(value);
}
this.kana = historyKana(this.history);
}
component.htmlでの実装
<div>
<div>
<label>input:</label>
<input #box id="name" type="text" (input)="onInput(box.value)">
</div>
<label>kana:</label>
<input id="kana" type="text" [(ngModel)]="kana">
</div>
上記で問題なく動きました。
もしひらがなじゃなくて、カタカナにしたい場合には、以下のような形で行けると思います。
hiraToKana(hira: string): string {
return hira.replace(/[\u3041-\u3096]/g, function(match) {
var chr = match.charCodeAt(0) + 0x60;
return String.fromCharCode(chr);
});
}
this.kana = historyKana(this.history);
↓
this.kana = this.hiraToKana(historyKana(this.history));
こんな感じで行けるかと思います。
hiraToKanaメソッドはどっかサービスクラスに作っておいてどこからでも呼び出せるようにしておけばよいかと思います。
私が実装したときには、上記のままだと以下のようなエラーが発生しました。
global is not defined
同じようなエラーが発生したら、polyfills.tsに以下を追加すれば行けるかと思います。
// "global is not defined"の対応
(window as any).global = window;
軽く動作確認はしていますが、いろいろ試すうちに変な挙動するかもしれませんのでお気を付けください。
今の所確認できている不具合
- 入力中にカタカナに勝手に変換される(macだとなる?)と、カタカナに変換されて以降の入力がうまく変換されないっぽい。
- ライブ変換っていうらしいですね。これが走っちゃうとひらがなとしてhisotoryに追加されないからうまく行かないのかと思います。
ソースはgitに上げてます
https://github.com/kanazawanao/angular-auto-kana-sample関連