Try toneletter.js

View on GitHub

Built up with Thai.
  • Press '1'~'5' key behind a vowel to add a tone letter.
      tone 1 (ā), tone 2 (à), tone 3 (â), tone 4 (á), tone 5 (ǎ)
  • Type 'W' key to put a phonetic letter 'ʉ'
  • Type 'U' key to put a phonetic letter 'ə'
  • Type 'E' key to put a phonetic letter 'ɛ'
  • Type 'O' key to put a phonetic letter 'ɔ'
  • Type 'N' key to put a phonetic letter 'ŋ'
How to activate toneletter.

$('.thai').toneletter({ lang: 'th' });

Click this button, and it'll stop the observation on keys pressing.

$input = $('.thai').toneletter({ lang: 'th' });
$input.toneletter('off');


Putting tone letters at current cursor position by method call.

$input = $('.thai').toneletter({ lang: 'th' });

$('#add-tone-1').click(function(e) {
  $input.toneletter('addTone', 1);
});

Customize tone keys and phonetic keys and letters.

$('.thai').toneletter({
  lang: 'th',
  toneKeys: ['0', '1', '2', '3', '4'],  // for tones ā, à, â, á, ǎ
  phonetics: {
    'U': '\u0289', // ʉ
    'A': '\u0259', // ə
    'E': '\u025b', // ɛ
    '@': '\u0254', // ɔ
    'G': '\u014b', // ŋ
  },
});
It works well with Chinese Pinyin.

$('.pinyin').toneletter({ lang: 'cn' });

  • Press '1'~'4' key behind a vowel to add a tone letter.
      tone 1 (ā), tone 2 (á), tone 3 (ǎ), tone 4 (à)
  • Type 'U' key to put a phonetic letter 'ü'