長いタイトルになってしまっていますが、内容は以下の通りです。
iOSのテキストボックスで発生する問題
例えば以下のように、テキストボックスの入力後、入力値をカタカナに変換する処理を書いたとして、
<template>
<form>
<div>
<input
type="text"
v-model="value1"
/>
</div>
<div>{{ value1 }}</div>
<div>
<input
type="text"
v-model="value2"
/>
</div>
<div>{{ value2 }}</div>
</form>
</template>
<script lang="ts">
import {Vue, Component, Watch} from "vue-property-decorator";
@Component
export default class InputForiOSTest extends Vue {
public value1: string = '';
public value2: string = '';
public toKatakana(value: string) {
return value.replace(/[ぁ-ゔ]/g, (s) => {
return String.fromCharCode(s.charCodeAt(0) + 0x60);
});
}
@Watch("value1")
public onValue1Change() {
this.value1 = this.toKatakana(this.value1);
}
@Watch("value2")
public onValue2Change() {
this.value2 = this.toKatakana(this.value2);
}
}
</script>
これを実際にiOSのSafariで開いてみて、
- 最初のテキストボックスを選択し、日本語を入力。
- そのまま確定せずに、次のテキストボックスをタップする。
- そうすると、最初のテキストボックスで値の変換がされるが、何故かその値が次のテキストボックスにも入力される。
という現象が発生します。値の変換を行わなければこの現象は発生しません。。。だれかこの現象の原因がわかる方いらっしゃたら教えて下さい。。。
解決策
とりあえず、この現象が起こる流れは把握できたので、以下のようにカスタムテキストボックスを実装してみました。
<template>
<input v-model="_value" />
</template>
<script lang="ts">
import {Vue, Component, Prop, Emit} from "vue-property-decorator";
@Component
export default class InputForiOS extends Vue {
/**
* v-modelでプロパティの値を書き換えられるようにする設定
*/
@Prop() public value!: any;
@Emit() private input(value: any) { return; }
private get _value(): any { return this.value; }
private set _value(value: any) { this.input(value); }
/**
* 以下、iOSで未確定の入力値が他のテキストボックスにコピーされてしまう問題の対処
*/
private isComposing: boolean = false; // IME入力中かどうか
public mounted() {
// イベント登録
this.$el.addEventListener("compositionstart", this.onCompositionStart);
this.$el.addEventListener("compositionend", this.onCompositionEnd);
this.$el.addEventListener("blur", this.onBlur);
}
/**
* IME入力開始イベント
*/
private onCompositionStart() {
this.isComposing = true; // IME入力中
}
/**
* IME入力終了イベント
*/
private onCompositionEnd() {
this.isComposing = false; // IME入力確定済
}
/**
* テキストボックスのフォーカスが外れたときのイベント
* @param e イベント
*/
private onBlur(e: Event) {
const mouseEvent = e as MouseEvent;
const relatedTarget = mouseEvent.relatedTarget || document.activeElement; // 次にフォーカスした要素を取得
// 次のフォーカスがinput要素で、かつIME入力中ではない場合
if (relatedTarget && relatedTarget instanceof HTMLInputElement && this.isComposing) {
relatedTarget.addEventListener("beforeinput", function handler(inputEvent: Event) {
// 一度だけ入力をキャンセル
inputEvent.preventDefault();
relatedTarget.removeEventListener("beforeinput", handler);
// 次にフォーカスを当てたinput要素を選択する（setTimeoutで全ての処理が終了してから実行）
setTimeout(() => relatedTarget.select(), 0);
});
}
}
public destroyed() {
// イベント削除
this.$el.removeEventListener("compositionstart", this.onCompositionStart);
this.$el.removeEventListener("compositionend", this.onCompositionEnd);
this.$el.removeEventListener("blur", this.onBlur);
}
}
</script>
上記、処理の流れを大まかに説明すると、
- テキストボックスで日本語を入力すると、IME入力中となる。
- IME入力中にテキストボックスからフォーカスが外れて、かつ次のフォーカスする要素がinputだったら、次のinput要素への入力を一度だけキャンセルする。（これにより入力値がコピーされてしまう問題を対処）
- その後、次のinput要素にフォーカスを当てる。
という感じです。これにより、今回の現象がとりあえず解消されました。
<template>
<form>
<div>
<InputForiOS
type="text"
v-model="value1"
/>
</div>
<div>{{ value1 }}</div>
<div>
<InputForiOS
type="text"
v-model="value2"
/>
</div>
<div>{{ value2 }}</div>
</form>
</template>
<script lang="ts">
import {Vue, Component, Watch} from "vue-property-decorator";
import InputForiOS from '@/components/molecules/InputForiOS.vue';
@Component({
components: {InputForiOS}
})
export default class InputForiOSTest extends Vue {
public value1: string = '';
public value2: string = '';
public toKatakana(value: string) {
return value.replace(/[ぁ-ゔ]/g, (s) => {
return String.fromCharCode(s.charCodeAt(0) + 0x60);
});
}
@Watch("value1")
public onValue1Change() {
this.value1 = this.toKatakana(this.value1);
}
@Watch("value2")
public onValue2Change() {
this.value2 = this.toKatakana(this.value2);
}
}
</script>
でももっといい方法がありそうだなー。。。以上！w