default return key action in editor

Lapointe

is it possible to define default return action in editor as goto next input in the form (like tab key) ?

Lapointe

using formOptions onReturn ?

rf1234

I would use formOptions to turn off the submit when hitting the return key:
https://editor.datatables.net/reference/option/formOptions.main

In addition you would need to make sure the return key behaves like the tab key. Here is something on how to do this. The Editor api won't help you there I guess.
https://stackoverflow.com/questions/1009808/enter-key-press-behaves-like-a-tab-in-javascript

If you want to change the form options globally for all Editor instances you would need to do something like this:

//Editor default settings!
    $.extend( true, $.fn.dataTable.Editor.defaults, {
        formOptions: {
            main: {
                onReturn: false
            },
            bubble: {
                onReturn: false
            }
        }
    });

rf1234

I found this here: https://editor.datatables.net/reference/type/form-options

Looks like things have changed a little you should no longer return "false" but rather a string: "none".

In addition you can pass a function. You might be able to effect the change of the return key to become another tab key in this function as well. This would make things easier.

Lapointe

thanks @rf1234

The way you tell me do the job to focus next field in the form. I extend it to loop to first field when enter key pressed on last field.

document.addEventListener('keydown', function (event) {
  if (event.keyCode === 13 && (event.target.nodeName === 'INPUT' || event.target.nodeName === 'SELECT' || event.target.nodeName === 'CHECKBOX' )) {
    var form = event.target.form;
    var index = Array.prototype.indexOf.call(form, event.target);
    if (form.elements[index + 1]) form.elements[index + 1].focus();
    else form.elements[0].focus();
    event.preventDefault();
  }
});

I found a focus option at form construction options on same page you tell me. As we can know the list of fields in, if we can know the current focused one (not sure) is there a way in callback func to set focus on next form field ?

Another point (seem starnge)

I see if using tab key in form, the focus goes away the form after last form control with no event like onBlur fired... and we can navigate to another url with no event to catch..

allan

is there a way in callback func to set focus on next form field ?

Yes, use field().focus().

There isn't a method to get the currently focused field though. You could however use document.activeElement combined with field().node() to find out which field you are in:

function currentlyFocused( editor ) {
  var fields = editor.order();
  for (var i=0 ; i<fields.length ; i++) {
    if (editor.field(fields[i]).input()[0] === document.activeElement) {
      return fields[i];
    }
  }
}

It won't work quite right if you are using checkboxes or radios, but it could be extended for that if you require it.

Allan

Lapointe

Thanks @allan
Yes, as shown above I need to go to next focus for each fields in editor on return key.
As I said, if using tab key, the focus can go away the form (and the application to) going in browser buttons for example.
In this case, the preBlur or preClose does not fire... Is it normal ?

Lapointe

running good for focus with loop in form fields only

                onReturn : function ( editor ) {
                    var fields = editor.order();
                    for (var i=0 ; i<fields.length ; i++) {
                        if (editor.field(fields[i]).input()[0] === document.activeElement) {
                            if (i===(fields.length-1)) i = -1;
                            editor.field(fields[++i]).focus();
                            return true;
                        }
                    }
                },