MacとWindowsで日本語入力中のEnterキーの動作に違いがあります。日本語の変換中にEnterキーを押した場合その入力中の日本語のを確定する動作になるのは同じですが、Macの場合だけEnterキーが確定とEnterキーの入力になってしまうためEnterのイベントが発火してしまいます。Windowsの場合はEnterキーの入力とはみなされずただの確定動作となりEnterイベントは発火しません。
MacでもWindowsと同じように日本語変換中のEnterキーを無効にします。
サンプル
以下は動作のサンプルです。キーを入力すると「Key入力イベント」に同じ文字が表示されます。
Enterキーを押すとそこまでに入力した文字が「Enter入力イベント」に表示されます。
Key入力の表示：
Enter入力の表示：
コードは以下の通り
<div class="sample">
<div>
<input type="text" id="input" onkeydown="KeyDown(event)" placeholder="入力してください"/>
</div>
<div>
Key入力の表示：
<div id="key_input"></div>
</div>
<div>
Enter入力の表示：
<div id="enter_input"></div>
</div>
<script>
// WindowsとMacで変換中のEnterキーを判別
const isConversionEnter = (event) => {
// Macはコードが229
if (navigator.platform.toUpperCase().indexOf("MAC") >= 0) {
return event.keyCode === 229;
}
// Windows
return false;
};
// キーボードの入力されたキーコードを取得
function KeyDown(event) {
const keyCode = event.keyCode;
const input_text = document.getElementById("input").value;
const output_div2 = document.getElementById("enter_input");
if (keyCode === 13) {
// 日本語変換中の確定のためのEnterキーか確認
if (!isConversionEnter(event)) {
output_div2.textContent = input_text;
}
}
}
// 入力された文字を取得し表示する、Enterキーは無視
document.getElementById('input').addEventListener('keyup', function (event) {
if (event.keyCode !== 13) {
const output_div1 = document.getElementById("key_input");
output_div1.textContent = document.getElementById("input").value;
}
});
</script>
</div>
