korean-ime-handler

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Korean IME Input Optimization Guide

韩语IME输入优化指南

When generating components for Quasar (Vue) or NiceGUI that involve text input, strictly follow these patterns to prevent "double-enter" bugs and "lagging binding" issues common with Korean characters.

在为Quasar（Vue）或NiceGUI开发涉及文本输入的组件时，请严格遵循以下模式，以避免韩语字符常见的“双击回车”bug和“绑定延迟”问题。

1. Quasar (Vue) Strategy

1. Quasar（Vue）解决方案

Native

v-model

in Vue 3/Quasar does not update during IME composition. Use explicit event binding instead.

Vue 3/Quasar中的原生

v-model

在输入法组合过程中不会更新。请改用显式事件绑定。

Recommended Implementation

推荐实现方式

Avoid:
```
v-model="text"
```
Use:
```
:model-value
```
with
```
@input
```
or
```
@update:model-value
```
for real-time sync.
Prevent Double Enter: Always check
```
event.isComposing
```
on Enter key events.

vue

<template>
  <q-input
    :model-value="text"
    @input="val => { text = val }"
    @keydown.enter="handleEnter"
    label="한글 입력"
  />
</template>

<script setup>
const text = ref('');

const handleEnter = (e) => {
  // Prevent duplicate execution during IME composition
  if (e.isComposing) return;
  console.log('Submitted:', text.value);
};
</script>

避免使用：
```
v-model="text"
```
推荐使用： 结合
```
:model-value
```
与
```
@input
```
或
```
@update:model-value
```
实现实时同步。
防止双击回车： 在处理回车键事件时，务必检查
```
event.isComposing
```
。

vue

<template>
  <q-input
    :model-value="text"
    @input="val => { text = val }"
    @keydown.enter="handleEnter"
    label="한글 입력"
  />
</template>

<script setup>
const text = ref('');

const handleEnter = (e) => {
  // 防止输入法组合过程中重复执行
  if (e.isComposing) return;
  console.log('Submitted:', text.value);
};
</script>

2. NiceGUI (Python) Strategy

2. NiceGUI（Python）解决方案

NiceGUI's

ui.input

defaults to

on_change

, which triggers late for Korean text. Use client-side JavaScript events for instant updates.

NiceGUI的

ui.input

默认使用

on_change

，这会导致韩语文本的触发延迟。请使用客户端JavaScript事件实现即时更新。

Recommended Implementation

Use 'on' with 'input' event for real-time IME tracking

使用'on'绑定'input'事件以实时跟踪IME输入

input_ui = ui.input(label='한글 입력') input_ui.on('input', f'() => {{ {input_ui.id}.value = event.target.value }}')

Handle Enter without double-firing

处理回车键时避免重复触发

input_ui.on('keydown.enter', ''' (e) => { if (e.isComposing) return; // Trigger server-side logic here } ''')

undefined

input_ui.on('keydown.enter', ''' (e) => { if (e.isComposing) return; // 在此处触发服务器端逻辑 } ''')

undefined

3. Core Principles

3. 核心原则

Real-time: IME composition must reflect in the state immediately without waiting for the block to finish.
Composition Awareness: The
```
isComposing
```
flag is mandatory for any
```
keydown.enter
```
logic to avoid processing the same input twice.

实时性： 输入法组合过程中必须立即将内容同步到状态，无需等待输入块完成。
组合状态感知： 任何回车键逻辑都必须检查
```
isComposing
```
标志，以避免重复处理同一输入。