Remove a word rather than character when pressing backspace.

[tauseefjanjua]

Hi there,

I wanted to remove a word rather than character when pressing backspace. Is there any solution for it?

[Mottie]

Hi @tauseefjanjua!

There isn't anything built-in yet, but I threw together the following code that will work for you.

Note, since the virtual keyboard doesn't support the control key, and in my testing the built-in combo of Ctrl+Backspace deletes the word to the previous whitespace, I used the virtual alt key to do the same thing (demo):

$(function() {
  function deleteToPrevWhiteSpace(base, pos) {
    var regex = /\s/,
      val = base.$preview.val(),
      index = pos.end - 1;
    // Look for whitespace left of caret
    while (index > 0 && !regex.test(val.substring(index - 1, index))) {
      index--;
    }
    val = val.substring(0, index) + val.substring(pos.end, val.length);
    base.$preview.val(val);
    base.saveCaret(index, index);
  }

  // Physical keyboard = ctrl + bksp
  // Virtual keyboard = alt + bksp
  $.keyboard.keyaction.bksp = function(base, keyElm, e) {
    if (base.isContentEditable) {
      base.execCommand("delete");
      // save new caret position
      base.saveCaret();
    } else {
      var pos = $.keyboard.caret(base.$preview);
      // Don't delete to prev whitespace if content is selected
      if ((e.ctrlKey || base.altActive) && pos.start === pos.end) {
        deleteToPrevWhiteSpace(base, pos);
      } else {
        // the script looks for the '\b' string and initiates a backspace
        base.insertText("\b");
      }
    }
  };

  $("#keyboard")
    .keyboard({
      layout: "international"
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });
});

[Mottie]

I'll eventually add this to the core. As well as allowing Ctrl+Delete for forward deletes.

[tauseefjanjua]

Thankyou,

Now the problem is, it is called on all keyboards. I am using two on different ids for separate layouts. one on #input and one on #textarea. I want alt+bksp to work on #input but not on #textarea.

I've used
$(#input).keyboard.keyaction.bksp = function(base, keyElm, e){......}
but it doesn't work.

How can I restrict it to only one?

[tauseefjanjua]

I also used.

kb.altActive = true;
//It worked

e.ctrlKey = true;

//but, it didn't worked.

How can I set ctrlKey to Active?

[Mottie]

Within the keyaction code, you can check the keyboard classname or id:

base.$el.hasClass("layout-1"); // class
base.$el.id === "layout-2"; // id

Then alter the behavior as needed.

You can't set the event.ctrlKey or event.altKey since they are keyboard event values set based on keyboard interaction.

To modify the kb.altActive, instead of directly modifying that value, use kb.showKeySet; but really the user interacting with the keyboard should be doing this automatically.