srm985 / mok-project

Multilingual Onscreen Keyboard Project
http://www.seanmcquay.com/mok-project.htm
MIT License
30 stars 8 forks source link

Dynamically value in the data-trigger-keyboard attribute #43

Closed madhuraadawadkar closed 5 years ago

madhuraadawadkar commented 5 years ago

Is there a way where I can bind the keyboard to a field depending on a boolean value that can change at runtime? Something like watching the value of the data-trigger-keyboard attribute for changes and then enabling/disabling keyboard on a field. Example, I have a checkbox, whose value will be given to the data-trigger-keyboard attribute on a text field. When user checks the checkbox, then the keyboard should be bound to the text field. When unchecked, the keyboard should be disabled.

srm985 commented 5 years ago

This isn't a feature of the keyboard but you can easily handle this on your end. Below is a simple snippet to get you started. This certainly is just a starting point and could be improved or adapted depending on how generic or specific of a solution you'd like. I mixed in some jQuery, but of course this could easily be done with vanilla JavaScript.

<input data-linked-field="keyboard-field-1" type="checkbox">
<input id="keyboard-field-1" data-trigger-keyboard="false" type="text">

<script>
  $('input:checkbox').change((event) => {
    const {
      target
    } = event;

    const {
      checked: isChecked
    } = target;

    const linkedField = $(target).data('linkedField');

    $(`#${linkedField}`).data('triggerKeyboard', isChecked);
  });
</script>
madhuraadawadkar commented 5 years ago

Thanks a lot! This worked perfectly!