بهبود ورودی ژاپنی UX در برنامه های چند زبانه: به درستی دست زدن به تبدیل IME

مقدمه

در توسعه برنامه های جهانی وب ، پشتیبانی چند زبانه یک الزام اساسی است. با این حال ، زبانهایی که از IME (ویرایشگر روش ورودی) استفاده می کنند مانند ژاپنی ، چینی و کره ای فرآیندهای ورودی و تبدیل منحصر به فردی دارند که نیاز به توجه ویژه دارند. در این مقاله موضوعات مربوط به عملیات فرم در ورودی ژاپنی و راه حل های آنها توضیح داده شده است.

مخاطب هدف

• توسعه دهندگان برنامه وب
• توسعه دهندگان Frontend
• کسانی که در توسعه برنامه های قابل دسترسی در سطح جهانی نقش دارند

مشکل: رسیدگی به رویداد در هنگام تبدیل IME

ورودی ژاپنی شامل یک فرآیند تبدیل از “Hiragana” به “Katakana/Kanji” است. در طی این فرآیند ، مسئله زیر اغلب اتفاق می افتد:

Example: When trying to search for "Tokyo Tower"
1. Type "とうきょうたわー" (hiragana)
2. Press spacebar to display conversion candidates
3. Press Enter to confirm "東京タワー" (kanji/katakana)
4. This Enter key mistakenly triggers the search execution

این منجر به جستجوی ناخواسته برای “برج توکیو” می شود و تجربه کاربر را تخریب می کند. این مشکل به ویژه در UI ها قابل توجه است که کلید Enter اقدامات مانند فرم های جستجو و رابط های گپ را انجام می دهد.

زمینه فنی: رویدادهای ترکیب

هنگام ورود با IME ، رویدادهای “ترکیب” علاوه بر رویدادهای استاندارد صفحه کلید اتفاق می افتد:

• compositionstart: شروع روند تبدیل
• compositionupdate: به روزرسانی متن در هنگام تبدیل
• compositionend: پایان روند تبدیل

علاوه بر این ، KeyboardEvent شیء شامل یک isComposing خاصیتی که نشان می دهد آیا تبدیل IME در حال انجام است یا خیر. درک این ویژگی اولین قدم برای بهبود UX است.

راه حل: با استفاده از خاصیت isComposing

پشتیبانی IME را می توان در چارچوب های جلوی مانند React ، Vue و Angular به شرح زیر اجرا کرد:

واکنش مثال اجرای

function SearchField({ onSearch }) {
  const handleKeyDown = (event) => {
    // Ignore Enter during IME conversion confirmation
    if (event.key === "Enter" && !event.nativeEvent.isComposing) {
      event.preventDefault();
      const searchTerm = event.target.value.trim();
      if (searchTerm) {
        onSearch(searchTerm);
      }
    }
  };

  return (
    <input 
      type="text" 
      onKeyDown={handleKeyDown} 
      placeholder="Search..." 
    />
  );
}

مثال اجرای VUE

مثال اجرای HTML/JavaScript

document.querySelector('input').addEventListener('keydown', function(event) {
  if (event.key === 'Enter' && !event.isComposing) {
    event.preventDefault();
    const searchTerm = this.value.trim();
    if (searchTerm) {
      performSearch(searchTerm);
    }
  }
});

دست زدن به اجزای پیچیده تر UI

همین روش را می توان هنگام استفاده از کتابخانه های UI مانند مواد-UI ، طراحی مورچه و UI چاکرا استفاده کرد. در اینجا یک مثال اجرای با مؤلفه خودکار Material-UI آورده شده است:

import { Autocomplete, TextField } from '@mui/material';

function SearchComponent({ onSearch, options }) {
  const [inputValue, setInputValue] = useState('');

  const handleKeyDown = (event) => {
    if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
      event.preventDefault();
      if (inputValue.trim()) {
        onSearch(inputValue.trim());
      }
    }
  };

  return (
    <Autocomplete
      freeSolo
      options={options}
      inputValue={inputValue}
      onInputChange={(event, newValue) => setInputValue(newValue)}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Search"
          variant="outlined"
          onKeyDown={handleKeyDown}
        />
      )}
    />
  );
}

روشهای تست

برای آزمایش پیاده سازی های مرتبط با IME:

1. برنامه را در حالت ورودی ژاپنی کار کنید
2. “Hiragana” را وارد کنید و نامزدهای تبدیل را به نمایش بگذارید
3. برای تأیید تبدیل ، Enter را فشار دهید
4. تأیید کنید که فشار دادن دوباره دوباره جستجو را انجام می دهد

آزمایش در یک محیط ژاپنی ایده آل است ، اما اگر IME ژاپنی در محیط توسعه شما در دسترس نباشد ، ابزارهای زیر می توانند مفید باشند:

• ویندوز: مایکروسافت IME
• MACOS: سیستم ورودی ژاپنی
• شبیه سازهای آنلاین: برخی از پسوندهای مرورگر می توانند ورودی IME را شبیه سازی کنند

یادداشت های سازگاری مرورگر

در حالی که isComposing املاک به طور گسترده در مرورگرهای مدرن پشتیبانی می شود ، ممکن است در مرورگرهای قدیمی متفاوت رفتار کند. به عنوان یک روش جایگزین برای اطمینان از سازگاری ، اجرای استفاده را در نظر بگیرید compositionstart وت compositionend رویدادها:

let isComposing = false;

input.addEventListener('compositionstart', () => {
  isComposing = true;
});

input.addEventListener('compositionend', () => {
  isComposing = false;
});

input.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && !isComposing) {
    // Execute search process
  }
});

پایان

در برنامه های چند زبانه ، پردازش ورودی که IME را در نظر می گیرد ضروری است. به خصوص در مواردی که کلید Enter اقداماتی از قبیل فرم های جستجو و رابط های گپ را انجام می دهد ، استفاده از آن مهم است isComposing خاصیت برای تمایز بین فرآیندهای تبدیل IME و ورودی طبیعی.

این ملاحظات کوچک تجربه کاربران زبانهایی مانند ژاپنی ، چینی و کره ای را تا حد زیادی بهبود می بخشد. در توسعه برنامه های جهانی ، توجه به چنین جزئیات منجر به پشتیبانی چند زبانه واقعی می شود.

منابع