ApplicationLauncher/example/AppTest/IpAddressInput.qml

import QtQuick 2.0

Item {
    id: ipAddresInput
    property double space: 4
    property double ipwidth: 200
    property double partwidth: (ipwidth / 4) - (3 * space)
    property color focuscolor: "green"
    property color ipcolor: "black"
    property string ipAddress: ""

    function makeIpAddress() {
        ipAddress = textInput1.text + "." + textInput2.text + "." +
                textInput3.text + "." + textInput4.text;
    }


    function fillIpFields() {
        var iplist = ipAddress.split(".");
        if(iplist.length >= 1) textInput1.text = iplist[0];
        if(iplist.length >= 2) textInput2.text = iplist[1];
        if(iplist.length >= 3) textInput3.text = iplist[2];
        if(iplist.length >= 4) textInput4.text = iplist[3];
    }

    onIpAddressChanged: {
        fillIpFields();

    }

    Component.onCompleted: {
        fillIpFields();
    }

    TextInput {
        id: textInput1
        x: ipAddresInput.x
        y: ipAddresInput.y
        width: partwidth
        KeyNavigation.tab: textInput2
        Keys.onReturnPressed:
        {
            textInput2.focus = true;
        }

        color: ipcolor
        font.pixelSize: 14
        validator: IntValidator {bottom:0; top:255}
        onFocusChanged: {
            makeIpAddress();
            color = (focus) ? focuscolor : ipcolor;
            cursorPosition = 0;
        }
    }

    TextInput {
        id: textInput2
        x: ipAddresInput.x + space + partwidth
        y: ipAddresInput.y
        width: partwidth
        KeyNavigation.tab: textInput3
        Keys.onReturnPressed:
        {
            textInput3.focus = true;
        }

        color: ipcolor
        font.pixelSize: 14
        validator: IntValidator {bottom:0; top:255}
        onFocusChanged: {
            makeIpAddress();
            color = (focus) ? focuscolor : ipcolor;
            cursorPosition = 0;
        }
    }

    TextInput {
        id: textInput3
        x: ipAddresInput.x + 2*space + 2*partwidth
        y: ipAddresInput.y
        width: partwidth
        KeyNavigation.tab: textInput4
        Keys.onReturnPressed:
        {
            textInput4.focus = true;
        }

        color: ipcolor
        font.pixelSize: 14
        validator: IntValidator {bottom:0; top:255}
        onFocusChanged: {
            makeIpAddress();
            color = (focus) ? focuscolor : ipcolor;
            cursorPosition = 0;
        }
    }

    TextInput {
        id: textInput4
        x: ipAddresInput.x + 3*space + 3*partwidth
        y: ipAddresInput.y
        width: partwidth
        KeyNavigation.tab: textInput1
        Keys.onReturnPressed:
        {
            textInput1.focus = true;
        }

        color: ipcolor
        font.pixelSize: 14
        validator: IntValidator {bottom:0; top:255}

        onFocusChanged: {
            makeIpAddress();
            color = (focus) ? focuscolor : ipcolor;
            cursorPosition = 0;
        }
    }

}