0

This question gives more details about context and motivation. Notice that I am on Linux and cares only about recent Firefox (at least 38) & Chrome.

Basically, I want to edit some AST interactively with a web interface.

In the MELT monitor on github commit 7b869102332bd29309 I would like to have a focusable <span> (which has tabindex='0' so can get focus) which, when I press the spacebar, is replaced by some <input type='text'/> which has already the focus...

I am not using contenteditable anymore, see this, because it looks that contenteditable is really messy (and don't work as well as I want)!

I've made a jsfiddle containing a simple example with:

<div id='mydiv_id'>
   *before* <span id='myspan_id' tabindex='0'>in span</span> !after!
</div>

and the JQuery 2 code:

var $mydiv = null;
var $myspan = null;
$(document).ready(function() {
  $myspan = $('#myspan_id');
  $mydiv = $('#mydiv_id');
  console.log (" mydiv=", $mydiv, " myspan=", $myspan);
  $myspan.on("keypress", function (ev) {
     console.log ("myspan keypress ev=", ev);
     if (ev.keyCode === 32 || ev.key === ' ') {
        console.log ("myspan got space ev=", ev);
        var myinput = 
           $("<input type='text' id='myinput_id' width='16' class='myinp_cl'/>");
        $myspan.replaceWith(myinput);
        myinput.focus();
        console.log ("myspan replaced with myinput=", myinput);
      }
   });
  console.log (" mydiv=", $mydiv, " myspan=", $myspan);
});

but it does not work as expected.

Or perhaps a focused <span> element cannot be replaced (on space keypress) with a focused <input> element?

(in the MELT monitor, I'm using jquery 2.1.4 embedded inside)

addenda

the updated jsfiddle works (sorry for my mistake, it needs jquery 2.1.4, with which it is working -and I regret having asked the question here), and since the Javascript of the MELT monitor is AJAX generated, I am not seeing every error in the console (see this question).

NB: In commit df3bdf3984bc202f I now have a case when, after programmatically moving the focus to a newly created <input>, $(':focus') is an empty object, and document.activeElement is the <body> itself....

I am now tempted to delete this question, it is probably useless...

Community
  • 1
  • 1
Basile Starynkevitch
  • 223,805
  • 18
  • 296
  • 547
  • 1
    What is the purpose of this? Can't you just set `contenteditable='true'`? https://jsfiddle.net/16ghx3f6/1/ – Arg0n Nov 30 '15 at 13:08
  • What's wrong with your code? https://jsfiddle.net/16ghx3f6/2/ (using newer jQuery version supporting `on()` method) – A. Wolff Nov 30 '15 at 13:10
  • No, I am understanding that contenteditable is basically unusable for my purpose. – Basile Starynkevitch Nov 30 '15 at 13:10
  • Still, what is the purpose? And also, what @A.Wolff pointed out, your code seems to work? – Arg0n Nov 30 '15 at 13:11
  • Your code works on jq 2.1.4: https://jsfiddle.net/16ghx3f6/6/ (tested only on chrome but would work on any modern browser supported by jq 2.x) Even you should replace `if (ev.keyCode === 32 || ev.key === ' ')` by `if(e.which === 32)` [event.which](https://api.jquery.com/event.which/) is normalized on jQuery – A. Wolff Nov 30 '15 at 13:20
  • Probably, my mistake is elsewhere. Should I delete my question? – Basile Starynkevitch Nov 30 '15 at 13:21
  • Whatever is your issue(???), it doesn't come from your posted code – A. Wolff Nov 30 '15 at 13:23
  • Sorry, my bug is somewhere else. I won't bother you by pasting the 600+ lines of my `webroot/microedit.js` file in github – Basile Starynkevitch Nov 30 '15 at 13:24
  • `$.fn.jQuery` run this in the console to see what version of jQuery is in the command, i suspect there might be older version of it. – Jai Nov 30 '15 at 13:26
  • @BasileStarynkevitch Once you have isolated problem, don't hesitate to post new question regarding it. I still don't know what is your issue but keep in mind `keypress` event bubble – A. Wolff Nov 30 '15 at 13:26
  • Related [metaquestion](http://meta.stackoverflow.com/q/311441/841108) about deleting this one! – Basile Starynkevitch Nov 30 '15 at 14:07

2 Answers2

3

As i saw your fiddle, what i noticed:

  1. You are using .on() method.
  2. .on() is not introduced in jQuery version 1.6.x but 1.7+.

So you can change to this: 

$myspan.keypress(function (ev) {

Updated fiddle.

cares only about recent Firefox (at least 38) & Chrome.

So, best to upgrade the jQuery version to latest one as possible and take the version 2.x tree.

Jai
  • 74,255
  • 12
  • 74
  • 103
  • 1
    I'd more advice to upgrade jQuery version :) EDIT: following OP's edit: `(in the MELT monitor, I'm using jquery 2.1.4 embedded inside)` So really not sure what is the issue here – A. Wolff Nov 30 '15 at 13:18
  • @A.Wolff agreed and added. – Jai Nov 30 '15 at 13:20
  • @A.Wolff i guess there could be another version of jQuery used on the page. – Jai Nov 30 '15 at 13:25
  • Ya it would make sense but i guess OP would have seen the error in console. But who knows... :) – A. Wolff Nov 30 '15 at 13:27
  • @A.Wolff: I am not seeing every error in the console... Javascript code is ajax generated. – Basile Starynkevitch Nov 30 '15 at 13:30
  • @BasileStarynkevitch So is your issue that keypress event not fired? If ya, you should [delegate it](https://learn.jquery.com/events/event-delegation/) – A. Wolff Nov 30 '15 at 13:31
  • @A.Wolff... thanks for your help, I don't understand what is my issue yet. – Basile Starynkevitch Nov 30 '15 at 13:33
  • 1
    @BasileStarynkevitch Firstly try delegating it, e.g: `$(document).on("keypress", "#myspan_id", function (ev) {...});`. If that fixes your issue, you know your issue :) – A. Wolff Nov 30 '15 at 13:34
1

You can bind focus event on the span like this:

var $mydiv = null;
var $myspan = null;
$(document).ready(function() {
  $myspan = $('#myspan_id');
  $mydiv = $('#mydiv_id');
    $myspan.on('focus', function() { var myinput = 
           $("<input type='text' id='myinput_id' width='16' class='myinp_cl'/>");
        $myspan.replaceWith(myinput);
        myinput.focus();
    });
});

Demo: http://jsfiddle.net/wLf0e3cs/

Ivanka Todorova
  • 9,964
  • 16
  • 66
  • 103