Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accepted method is fired when the keyboard is initialised #805

Open
grouser opened this issue Apr 26, 2021 · 1 comment
Open

Accepted method is fired when the keyboard is initialised #805

grouser opened this issue Apr 26, 2021 · 1 comment

Comments

@grouser
Copy link

grouser commented Apr 26, 2021

For some reason, the accepted method is fired once the keyboard is loaded, so if I write something in the accepted method, it's called just when the page is loaded.


var keyboard_options = {
      // set this to ISO 639-1 language code to override language set by
      // the layout: http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
      // language defaults to ["en"] if not found
      language: ['love'],
      rtl: false,

      // *** choose layout & positioning ***
      // choose from 'qwerty', 'alpha',
      // 'international', 'dvorak', 'num' or
      // 'custom' (to use the customLayout below)
      layout: 'custom',
      customLayout: {
        'normal': [
				'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
				'{tab} q w e r t y u i o p [ ] \\',
				'a s d f g h j k l ; \' {accept}',
				'{shift} z x c v b n m , . / {shift}',
				'{space}'
			],
			'shift': [
				'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
				'{tab} Q W E R T Y U I O P { & |',
				'A S D F G H J K L : " {accept}',
				'{shift} Z X C V B N M < > ? {shift}',
				'{space}'
			]
      },
      // Used by jQuery UI position utility
      position: {
      // null = attach to input/textarea;
      // use $(sel) to attach elsewhere
      of: $(".keyboardDiv"),
      my: 'center top',
      at: 'center top',
      // used when "usePreview" is false
      at2: 'center bottom',
      collision: 'flipfit flipfit'
    },

      // allow jQuery position utility to reposition the keyboard on
      // window resize
      reposition: true,

      // true: preview added above keyboard;
      // false: original input/textarea used
      usePreview: false,

      // if true, the keyboard will always be visible
      alwaysOpen: true,

      // give the preview initial focus when the keyboard
      // becomes visible
      initialFocus: true,
      // Avoid focusing the input the keyboard is attached to
      noFocus: false,

      // if true, keyboard will remain open even if
      // the input loses focus.
      stayOpen: false,

      // Prevents the keyboard from closing when the user clicks or
      // presses outside the keyboard. The `autoAccept` option must
      // also be set to true when this option is true or changes are lost
      userClosed: false,

      // if true, keyboard will not close if you press escape.
      ignoreEsc: false,

      // *** change keyboard language & look ***
      display: {
        'meta1': '\u2666', // Diamond
        'meta2': '\u2665', // Heart

        // check mark (accept)
        'a': '\u2714:Accept (Shift-Enter)',
        'accept': 'OK:Accept (Shift-Enter)',
        'alt': 'AltGr:Alternate Graphemes',
        // Left arrow (same as &larr;)
        'b': '\u2190:Backspace',
        'bksp': 'Bksp:Backspace',
        // big X, close/cancel
        'c': '\u2716:Cancel (Esc)',
        'cancel': 'Cancel:Cancel (Esc)',
        // clear num pad
        'clear': 'C:Clear',
        'combo': '\u00f6:Toggle Combo Keys',
        // num pad decimal '.' (US) & ',' (EU)
        'dec': '.:Decimal',
        // down, then left arrow - enter symbol
        'e': '\u21b5:Enter',
        'empty': '\u00a0', // &nbsp;
        'enter': 'Enter:Enter',
        // left arrow (move caret)
        'left': '\u2190',
        // caps lock
        'lock': '\u21ea Lock:Caps Lock',
        'next': 'Next \u21e8',
        'prev': '\u21e6 Prev',
        // right arrow (move caret)
        'right': '\u2192',
        // thick hollow up arrow
        's': '\u21e7:Shift',
        'shift': 'Shift:Shift',
        // +/- sign for num pad
        'sign': '\u00b1:Change Sign',
        'space': 'SPACE:Space',
        // right arrow to bar
        // \u21b9 is the true tab symbol
        't': '\u21e5:Tab',
        'tab': '\u21e5 Tab:Tab',
        // replaced by an image
        'toggle': ' ',

        // added to titles of keys
        // accept key status when acceptValid:true
        'valid': 'valid',
        'invalid': 'invalid',
        // combo key states
        'active': 'active',
        'disabled': 'disabled'

      },

      // Message added to the key title while hovering,
      // if the mousewheel plugin exists
      wheelMessage: 'Use mousewheel to see other keys',

      css: {
        // input & preview
        input: 'ui-widget-content ui-corner-all',
        // keyboard container
        container: 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',
        // keyboard container extra class (same as container, but separate)
        popup: '',
        // default state
        buttonDefault: 'ui-state-default ui-corner-all',
        // hovered button
        buttonHover: 'ui-state-hover',
        // Action keys (e.g. Accept, Cancel, Tab, etc);
        // this replaces "actionClass" option
        buttonAction: 'ui-state-active',
        // Active keys
        // (e.g. shift down, meta keyset active, combo keys active)
        buttonActive: 'ui-state-active',
        // used when disabling the decimal button {dec}
        // when a decimal exists in the input area
        buttonDisabled: 'ui-state-disabled',
        // {empty} button class name
        buttonEmpty: 'ui-keyboard-empty'
      },

      // *** Useability ***
      // Auto-accept content when clicking outside the
      // keyboard (popup will close)
      autoAccept: true,
      // Auto-accept content even if the user presses escape
      // (only works if `autoAccept` is `true`)
      autoAcceptOnEsc: false,

      // Prevents direct input in the preview window when true
      lockInput: false,

      // Prevent keys not in the displayed keyboard from being
      // typed in
      restrictInput: false,
      // Additional allowed characters while restrictInput is true
      restrictInclude: '', // e.g. 'a b foo \ud83d\ude38'

      // Check input against validate function, if valid the
      // accept button is clickable; if invalid, the accept
      // button is disabled.
      acceptValid: true,
      // Auto-accept when input is valid; requires `acceptValid`
      // set `true` & validate callback
      autoAcceptOnValid: false,

      // if acceptValid is true & the validate function returns
      // a false, this option will cancel a keyboard close only
      // after the accept button is pressed
      cancelClose: true,

      // tab to go to next, shift-tab for previous
      // (default behavior)
      tabNavigation: true,

      // enter for next input; shift-enter accepts content &
      // goes to next shift + "enterMod" + enter ("enterMod"
      // is the alt as set below) will accept content and go
      // to previous in a textarea
      enterNavigation: true,
      // mod key options: 'ctrlKey', 'shiftKey', 'altKey',
      // 'metaKey' (MAC only)
      // alt-enter to go to previous;
      // shift-alt-enter to accept & go to previous
      enterMod: 'altKey',

      // if true, the next button will stop on the last
      // keyboard input/textarea; prev button stops at first
      // if false, the next button will wrap to target the
      // first input/textarea; prev will go to the last
      stopAtEnd: true,

      // Set this to append the keyboard immediately after the
      // input/textarea it is attached to. This option works
      // best when the input container doesn't have a set width
      // and when the "tabNavigation" option is true
      appendLocally: false,
      // When appendLocally is false, the keyboard will be appended
      // to this object
      appendTo: 'body',

      // If false, the shift key will remain active until the
      // next key is (mouse) clicked on; if true it will stay
      // active until pressed again
      stickyShift: true,

      // Prevent pasting content into the area
      preventPaste: false,

      // caret places at the end of any text
      caretToEnd: false,

      // caret stays this many pixels from the edge of the input
      // while scrolling left/right; use "c" or "center" to center
      // the caret while scrolling
      scrollAdjustment: 10,

      // Set the max number of characters allowed in the input,
      // setting it to false disables this option
      maxLength: false,
      // allow inserting characters @ caret when maxLength is set
      maxInsert: true,

      // Mouse repeat delay - when clicking/touching a virtual
      // keyboard key, after this delay the key will start
      // repeating
      repeatDelay: 500,

      // Mouse repeat rate - after the repeatDelay, this is the
      // rate (characters per second) at which the key is
      // repeated. Added to simulate holding down a real keyboard
      // key and having it repeat. I haven't calculated the upper
      // limit of this rate, but it is limited to how fast the
      // javascript can process the keys. And for me, in Firefox,
      // it's around 20.
      repeatRate: 20,

      // resets the keyboard to the default keyset when visible
      resetDefault: false,

      // Event (namespaced) on the input to reveal the keyboard.
      // To disable it, just set it to ''.
      openOn: 'focus',

      // Event (namepaced) for when the character is added to the
      // input (clicking on the keyboard)
      keyBinding: 'mousedown touchstart',

      // enable/disable mousewheel functionality
      // enabling still depends on the mousewheel plugin
      useWheel: true,

      // combos (emulate dead keys)
      // if user inputs `a the script converts it to à,
      // ^o becomes ô, etc.
      useCombos: false,
      // if you add a new combo, you will need to update the
      // regex below
      combos: {
        // uncomment out the next line, then read the Combos
        //Regex section below

      },

      // *** Methods ***
      // Callbacks - attach a function to any of these
      // callbacks as desired
      initialized: function(e, keyboard, el) {
      },
      beforeVisible: function(e, keyboard, el) {
          keyboard.close();
      },
      visible: function(e, keyboard, el) {
          if ($.keyboard.caret(keyboard.$preview).start === 0) {
            keyboard.showKeySet('shift');
        }
      },
      beforeInsert: function(e, keyboard, el, textToAdd) { return textToAdd; },
      change: function(e, kb, el) {
          console.log(el);
          var caret = $.keyboard.caret(kb.$preview),
          end = caret.end - 2 >= 0 ? caret.end - 2 : caret.end;
            str = kb.$preview.val().substring(end, caret.end);
            if (!/shift|lock/i.test(kb.last.key)) {
                kb.shiftActive = (el.id === "vehicle_reg" || caret.start === 0 || str.substr(str.length - 1) == ' ');
                kb.showKeySet();
            }
        },
      beforeClose: function(e, keyboard, el, accepted) {
        /*  var inputs = $(":input:not([type=hidden])");
          var len = inputs.length - 1;
          var indx = inputs.index(el);
          var topPadding = 80;
         $(window).scrollTop(inputs.eq(indx).offset().top - topPadding);
          var n = indx + 1;
          if (n > len) {
            return;
          }
          keyboard.close();
          inputs.eq(n).focus();*/
      },
      accepted: function(e, keyboard, el) {
          console.log("Called");
          return true;
      },
      canceled: function(e, keyboard, el) {

      },
      restricted: function(e, keyboard, el) {},
      hidden: function(e, keyboard, el) {

      },

      // called instead of base.switchInput
      // Go to next or prev inputs
      // goToNext = true, then go to next input;
      //   if false go to prev
      // isAccepted is from autoAccept option or
      //   true if user presses shift-enter

      validate: function(keyboard, value, isClosing) {
        return true;
      }

    };

  $('input').keyboard(keyboard_options).addTyping({
      showTyping: true,
      delay: 250
    });
@Mottie
Copy link
Owner

Mottie commented Apr 27, 2021

Hi @grouser!

The problem is the keyboard.close() within the beforeVisible callback... when I comment it out, the accepted callback isn't logging - demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants