<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>

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

body {
  text-align: center;
  font-family: momospace;
  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;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#block').css('ime-mode', $(this).attr('id'));
  
});