ime-mode у CSS — застаріле керування редактором IME

HTML

<p>Поле, якому старі браузери вимикали IME:</p>
<input type="text">

CSS

input {
    ime-mode: disabled;
}

HTML

<input type="text" name="name" placeholder="Your text">

CSS

input {
  ime-mode: disabled;
}

HTML

<p class="cap">Мертвий рядок — перевірки не задає, підсвітки немає:</p>
<label class="f">
    <span>ime-mode: disabled</span>
    <input class="dead" type="text" value="будь-що, і це приймається">
</label>

<p class="cap">Сучасна розмітка — перевірка одразу, без скриптів:</p>
<label class="f">
    <span>pattern="[0-9]{5}" — індекс правильний</span>
    <input class="live" type="text" pattern="[0-9]{5}" value="01001">
</label>
<label class="f">
    <span>pattern="[0-9]{5}" — індекс із літерами</span>
    <input class="live" type="text" pattern="[0-9]{5}" value="01a01">
</label>
<label class="f">
    <span>type="email" — адреса правильна</span>
    <input class="live" type="email" value="[email protected]">
</label>
<label class="f">
    <span>type="email" — адреса неправильна</span>
    <input class="live" type="email" value="hi-css-in-ua">
</label>

CSS

.cap {
    margin: 18px 0 10px;
    max-width: 620px;
    font: 600 .9em/1.45 system-ui, sans-serif;
    color: #5a6472;
}

.f {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.f span {
    width: 280px;
    font: .85em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

input {
    width: 240px;
    padding: 7px 9px;
    border: 3px solid #b9c6d8;
    background: #fff;
    font: 14px/1.3 system-ui, sans-serif;
}

.dead {
    ime-mode: disabled;
}

.live:valid {
    border-color: #2e8b57;
    background: #eefaf1;
}

.live:invalid {
    border-color: #c0392b;
    background: #fdeeee;
}

HTML

<p>Вибери потрібне значення для <code>ime-mode</code>.</p>

<p>Редактор методів вводу (IME) дозволяє вставляти на сторінки символу китайського, корейського і японського алфавітів (ієрогліфи) і потім редагувати їх. IME - це основний і необхідний компонент для написання текстів на цих мовах. В алфавітах цих мов занадто багато символів, щоб їх можна було закодувати і розмістити на звичайній клавіатурі. </p>

<p>Зверніть увагу, на підтримку цієї <a href="https://css.in.ua/css/property/ime-mode">властивості браузерами!</a></p>

<div class="inputs">
  <input id="auto" checked name="outline-style" type="radio"/>
  <label for="auto">auto</label>
  <message for="auto">Стан текстового поля не змінюється. За замовчуванням.</message>
  <input id="active" name="outline-style" type="radio"/>
  <label for="active">active</label>
  <message for="active">Всі знаки розміщені через IME. Користувачі можуть деактивувати IME.</message>
  <input id="inactive" name="outline-style" type="radio"/>
  <label for="inactive">inactive</label>
  <message for="inactive">Всі знаки розміщені без використання IME. Користувачі можуть активувати IME.</message>
  <input id="disabled" name="outline-style" type="radio"/>
  <label for="disabled">disabled</label>
  <message for="disabled">IME повністю відключений. Його користувачі не можуть активувати IME, якщо елемент керування має фокус введення.</message>
</div>

<p id="message">Стан текстового поля не змінюється. За замовчуванням.</p>

<hr>

<input id="block" placeholder="text"></input>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  padding: 6px;
  width: 275px;
  margin: 75px auto 0 auto;
  border: 1px solid #666;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}

JS

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('ime-mode', this.id));

}));