How to change input method (i.e. for foreign language) in html text area

Question

Assuming that the user keyboard is set to English keyboard settings in English, is it possible to create an html text box with a Vietnamese button, which when pressed will start by storing all user input as a Vietnamese keyboard input method?

For example, if I connect the button to the vietnamese-vni input method , and using my default English English keyboard, I typed: this is Vietnamese:Then I pressed the button and typed tie4ng vie6t, I want the text area to displaythis is Vietnamese: tiẽng viêt

I wonder if there is a way to do this in html / css / javascript?

Answer 1

It's not so easy to make your own script, but there is a library that does exactly what you want :

(function() {
  var txt = document.getElementById('vin'),
      btn = document.getElementById('change'),
      vin = false;
  
  VNTYPING.VNID = ['vin'];
  VNTYPING.SetMethod(0);
  
  btn.addEventListener('click', function() {
    vin = !vin;
    btn.textContent = vin ? 'ENG' : 'VIN';
    VNTYPING.SetMethod(vin ? 1 : 0);
    txt.focus;
  });
})();

<script src="http://www.vntyping.com/vntyping.min.js"></script>
<textarea id="vin"></textarea>
<button id="change">VIN</button>

Run codeHide result