How to pass "this" on an enter key event?

Question

I think this is a syntax question, but I can't seem to find a question that answers what I'm looking for. There's lots that are... close. Might be something with binding, or "apply", but I can't figure out how to use those in this context.

I have a function, that when fired, turns a span into an input so it can be edited. Then, when the focus is off (blur), the new text is saved. So far that works exactly as I wanted. I thought it would be nice if enter key would do the same thing... but I can't figure out how to make the event work.

function span_into_textarea() {
    var old_text = $(this).text();
    var editableText = $("<input type='text' />");
    editableText.val(old_text);
    $(this).replaceWith(editableText);
    editableText.focus();
    editableText.blur(textarea_into_span);
    editableText.keypress(function (e) {
        if (e.which == 13) {textarea_into_span()}
    }); // THIS DOESNT PASS ANYTHING TO "THIS"
    editableText.keypress(textarea_into_span); //THIS WORKS BUT I CAN'T KNOW WHICH KEY WAS PRESSED
}

function textarea_into_span() {
    var new_text = $(this).val();
}

Thanks for any help!

Possible duplicate of [execute function on enter key](http://stackoverflow.com/questions/16011312/execute-function-on-enter-key) — Liam, Mar 20 '17 at 14:03

ilyaigpetrov · Answer 1 · 2017-03-20T14:26:56.700

2

You may bind: editableText.keypress( textarea_into_span.bind(this) ) (event is passed as an argument).
You may replace textarea_into_span with an arrow function (they don't bind this so it is looked up in parent context):
```
editableText.keypress( (e) => {
  if (e.which == 13) {
    var new_text = $(this).val();
  }
})
```

As suggested by @Mouser you may use call or apply:

editableText.keypress( function(e) {
  if (e.which == 13) {
    textarea_into_span.call(this);
    // or textarea_into_span.apply(this)
  }
})

edited Mar 20 '17 at 14:26

answered Mar 20 '17 at 14:05

ilyaigpetrov

3,657
3
30
46

1

Arrow will only work on modern browser, should be nice as a disclaimer. – Mouser Mar 20 '17 at 14:06

Mouser · Accepted Answer · 2017-03-20T14:08:09.020

2

You can use call to pass the this reference:

editableText.keypress(function (e) {
    if (e.which == 13) {textarea_into_span.call(this)} //will refer to editableText
});

edited Mar 20 '17 at 14:08

answered Mar 20 '17 at 14:05

Mouser

13,132
3
28
54

You have three of those functions: `bind`, `call` and `apply`. It's worthwhile to look into them. – Mouser Mar 20 '17 at 14:09

score 1 · Answer 3 · answered Mar 20 '17 at 14:07

Try this way, you were losing the scope:

function span_into_textarea() {
    var modify = this;
    var old_text = $(this).text();
    var editableText = $("<input type='text' />");
    editableText.val(old_text);
    $(this).replaceWith(editableText);
    editableText.focus();
    editableText.blur(textarea_into_span(modify));
    editableText.keypress(function (e) {
        if (e.which == 13) {textarea_into_span(modify)}
    });
}

function textarea_into_span(modify) {
    var new_text = $(modify).val();
}

As long as you're in the scope of the function this will work! — Mouser, Mar 20 '17 at 14:09

score 0 · Answer 4 · edited Mar 27 '18 at 07:25

0

editableText.keypress(function(e) {
    var key = e.which;
    if (key == 13) // enter key ascii code
    {
        textarea_into_span.call(this) //will refer to editableText
    }
});

edited Mar 27 '18 at 07:25

derloopkat

6,232
16
38
45

answered Mar 27 '18 at 06:31

manoj yadav

44
6

1

Although your code snippet might solve the issue, you should describe what’s the purpose of your code (how it solves the problem). Furthermore, you might want to check https://stackoverflow.com/help/how-to-answer – Ahmad F Mar 27 '18 at 07:20

How to pass "this" on an enter key event?

4 Answers4