Dashboard Template next field on enter

Dashboard
1

Hi,
I have a simple dashboard template table that I use for entering data from a barcode scanner (that emulates a keyboard)

The barcode scanner enters the scanned code, followed by enter

I'd like to be able to have the focus shifted to the next field (and then hit the submit button when I get to the end) automatically when each item is scanned.

Here's what the existing table looks like:

<table cellspacing="0" cellpadding="0">

    <tr >
        <td>Customer ID</td>
        <td>Customer</td>
        <td>Model</td>
        <td>IMEI</td>
        <td>ICCID</td>
        <td>Add</td>
    </tr>
   <tr>
        <td><input type="text"      ng-model="message.customerID" ></td>
        <td><input type="text"      ng-model="message.customer"></td>
        <td><input type="text"      ng-model="message.model"></td>
        <td><input type="text"      ng-model="message.imei"></td>
        <td><input type="text"      ng-model="message.iccid"></td>
        <td><md-button ng-click="send({payload: {
         customerID:    message.customerID,
         customer   :       message.customer,
         model  :       message.model,
         imei   :       message.imei,
         iccid  :       message.iccid,
         action :       'add'
                                            
                                            }})" >
                Add
            </md-button></td>
    
    </tr>
   
</table>

Any advice would be greatly appreciated :slight_smile:

James

2

Hi James, try this...

<script>
(function(scope) {
    console.log("in scope (this log entry helps us finding the code in devtools :)");
    document.querySelectorAll('#myInputTable1 input').forEach( el => {
        el.addEventListener('keydown', e => {
            if(e.keyCode === 13) {
                let nextCol = el.parentNode.nextElementSibling;
                if (!nextCol) return;
                let nextEl = nextCol.firstElementChild;
                if (!nextEl) return;
                if(nextEl.nodeName === 'INPUT') {
                    nextEl.focus();
                } else if(nextEl.nodeName === 'BUTTON') {
                    $(nextEl).click();//operate the button
                    $('#myInputTable1 input[ng-model]').val('');//clear the fields
                    $('#myInputTable1 input[ng-model="message.customerID"]').focus();//go back to 1st input
                }
            }
        })
    })
})(scope);
</script>

<table cellspacing="0" cellpadding="0" id="myInputTable1">

    <tr >
        <td>Customer ID</td>
        <td>Customer</td>
        <td>Model</td>
        <td>IMEI</td>
        <td>ICCID</td>
        <td>Add</td>
    </tr>
   <tr>
        <td><input type="text" ng-model="message.customerID" ></td>
        <td><input type="text" ng-model="message.customer"></td>
        <td><input type="text" ng-model="message.model"></td>
        <td><input type="text" ng-model="message.imei"></td>
        <td><input type="text" ng-model="message.iccid"></td>
        <td>
            <md-button ng-click="send({payload: {
                 customerID: message.customerID,
                 customer  : message.customer,
                 model     : message.model,
                 imei      : message.imei,
                 iccid     : message.iccid,
                 action    : 'add' }})" > Add
            </md-button></td>
    </tr>
</table>

connect a debug node to the output of the ui_template

3

Thanks Steve, exactly what I wanted, will make my life so much easier!

I modified what you posted slightly, but worked perfectly

<script>
(function(scope) {
    console.log("in scope (this log entry helps us finding the code in devtools :)");
    document.querySelectorAll('input').forEach( el => {
        el.addEventListener('keydown', e => {
            if(e.keyCode === 13) {
                let nextCol = el.parentNode.nextElementSibling;
                if (!nextCol) return;
                let nextEl = nextCol.firstElementChild;
                if (!nextEl) return;
                if(nextEl.nodeName === 'INPUT') {
                    nextEl.focus();
                } else if(nextEl.nodeName === 'BUTTON') {
                    $(nextEl).click();//operate the button
                    $('#myInputTable1 input[ng-model="message.imei"]').val('');//clear field
                    $('#myInputTable1 input[ng-model="message.iccid"]').val('');//clear field
                    $('#myInputTable1 input[ng-model="message.imei"]').focus();//go back to 1st input
                }
            }
        })
    })
})(scope);
</script>
1 Like
4

Hi
How do you set focus at the first field when the tab is open?
With severals simple ui_text_input's in a tab, How do you can shift the focus to a desired text input or next one ?

Thanks in advance

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.