开发者

Capturing the delete/backspace keys in SproutCore

开发者 https://www.devze.com 2023-01-15 19:20 出处:网络
I have a SproutCore Pane - a PalettePane, specifically - which includes a form tied to an object elsewhere on the screen. The Pane is causing trouble with the object deletion interaction. The way I wa

I have a SproutCore Pane - a PalettePane, specifically - which includes a form tied to an object elsewhere on the screen. The Pane is causing trouble with the object deletion interaction. The way I want it to work is:

  • If a text input field is in focus, the backspace/delete keys should apply to those fields (i.e. editing the text)
  • If no text input field has focus, the backspace/delete keys should delete the 开发者_JS百科selected object related to the form. (The pane appears when the user has selected an object, so if the pane exists there's a selected object.)

So far, I get one of these behaviors or the other, never both. If I set acceptsKeyPane: YES in the Pane, I get the backspace/delete keys applying to the text fields, but no deleting of selected objects when the text fields don't have focus. If I use acceptsKeyPane: NO, when I'm editing a text field and hit backspace, it deletes the object I was trying to edit.

To add insult to injury, in Firefox with acceptsKeyPane: YES the backspace key is caught by the browser and interpreted as a back-button click, which is going to be frustrating to the user.

I've looked at the root_responder.js code and it looks like SproutCore handles backspaces differently for Firefox, but if I can handle them as described above the distinction between FF and other browsers should be moot.

ETA May 2011: Bear in mind when reading answers here that the SproutCore API for 1.5, 1.6 and beyond may not be the same as this.


Here's how we finally wound up doing it:

  • When the pane was created, we called becomeFirstResponder() on it.
  • We added acceptsFirstResponder: YES to its view definition.
  • Then we added to the view definition:
    keyDown: function(evt) {
      return this.interpretKeyEvents(evt) ? YES : NO;
    },

    deleteBackward: function() {
      this.get('objectToEdit').destroy();
      return YES;
    },

    deleteForward: function() {
      this.get('objectToEdit').destroy();
      return YES;
    }

...and that did the trick.

0

精彩评论

暂无评论...
验证码 换一张
取 消