editor instance focus next field

editor instance focus next field

AllcorAllcor Posts: 16Questions: 5Answers: 0

I was looking at the form-options because my users did not like the onEnter to submit the form. Now I noticed there can be a function call there. Preferably onEnter would make the next field get focus.

So the function passes the editor instance, and I can focus on a field.

formOptions: {
    main:{
        onReturn: function (e) {
            e.field( 'my_field' ).focus();
        },
    }
},

but how do I get the name of the next field?

Or would it be possible to call the behavior of the Tab key somehow?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,156Questions: 1Answers: 10,192 Site admin
    Answer ✓

    I've never come across that behaviour before in a web-form, so you might want to be a little careful about this since it might run contrary to user expectations - although you do note that your users are asking for this.

    What you would need to do is use order() which will give you an array of the field names in the order they are displayed. Then use field().input() to get the input elements for each and check them against document.activeElement which is the currently focused one. Once one matches, you know you want to change focus to the next in the loop.

    Allan

  • AllcorAllcor Posts: 16Questions: 5Answers: 0

    I'm using datatables for internal data manegement. They expect excel like behavior.

    It's more involved then I hoped. Will see if i get it working.

  • allanallan Posts: 62,156Questions: 1Answers: 10,192 Site admin

    For Excel like behaviour, inline editing with the KeyTable extension enabled is the closest in DataTables and Editor.

    Allan

  • AllcorAllcor Posts: 16Questions: 5Answers: 0

    Thanks, allan! can dynamically get the next field.

    for (i = 0; i < e.order().length; i++) {
        field_i = e.field(e.order()[i]);
        if (field_i.input()[0].id === document.activeElement.id) {
            e.field(e.order()[i+1]).focus();
        }
    }
    

    It hangs on select fields and hidden fields though. Tried to detect hidden with field().input()[0].hidden but this is false also for the hidden field.

  • allanallan Posts: 62,156Questions: 1Answers: 10,192 Site admin

    I wonder if rather than using order() then it might be best to just get a list of the field inputs using jquery: $('div.DTE input, div.DTE select') for example. That will give you the list of input elements, in document order and the same "trick" could be applied.

    Allan

This discussion has been closed.