ApplicationLauncher/example/AppTest/IpAddressInput.qml

import QtQuick 2.0

Item {
    id: ipAddresInput
    property double space: 4
    property double ipwidth: 200
    property double posX: 0
    property double posY: 0
    property double partwidth: (ipwidth / 4) - (3 * space)
    property color focuscolor: "green"
    property color ipcolor: "black"
    property color invalidcolor: "red"
    property string ipAddress: ""
    property double ipFontSize: 14
    property bool isValid: false

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

        if((textInput1.text >= 0) && (textInput1.text <= 255))
            textInput1.color = (!textInput1.focus)?ipcolor:focuscolor;
        else textInput1.color = invalidcolor;

        if((textInput2.text >= 0) && (textInput2.text <= 255))
            textInput2.color = (!textInput2.focus)?ipcolor:focuscolor;
        else textInput2.color = invalidcolor;

        if((textInput3.text >= 0) && (textInput3.text <= 255))
            textInput3.color = (!textInput3.focus)?ipcolor:focuscolor;
        else textInput3.color = invalidcolor;

        if((textInput4.text >= 0) && (textInput4.text <= 255))
            textInput4.color = (!textInput4.focus)?ipcolor:focuscolor;
        else textInput4.color = invalidcolor;
    }

    function fillIpFields() {

        function padDigits(number, digits) {
            return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
        };
        var iplist = ipAddress.split(".");
        var i;
        for ( i = 0; i < iplist.length; i++) iplist[i] = padDigits(iplist[i], 3);

        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: posX
        y: posY
        width: partwidth
        font.pixelSize: ipFontSize
        KeyNavigation.tab: textInput2
        Keys.onReturnPressed:
        {
            textInput2.focus = true;
        }

        color: ipcolor
        validator: IntValidator {bottom:0; top:999}
        inputMask: "000;"
        inputMethodHints: Qt.ImhDigitsOnly
        maximumLength: 3
        Keys.onReleased:  {
            if(cursorPosition == maximumLength){
                textInput2.focus = true;
            }
        }
        Keys.onPressed: {
            if((event.key == Qt.Key_Left) && (cursorPosition == 0)){
                textInput4.focus = true; textInput4.cursorPosition = 2;
            }
        }

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

    Text{
        id: ipDot1
        font.pixelSize: ipFontSize
        x: posX + textInput1.width
        y: textInput1.y
        color: ipcolor
        text:"."
    }

    TextInput {
        id: textInput2
        x: posX + space + partwidth + ipDot1.width
        y: posY
        width: partwidth
        font.pixelSize: ipFontSize
        KeyNavigation.tab: textInput3
        Keys.onReturnPressed:
        {
            textInput3.focus = true;
        }

        color: ipcolor
        validator: IntValidator {bottom:0; top:999}
        inputMask: "000;"
        inputMethodHints: Qt.ImhDigitsOnly
        maximumLength: 3
        Keys.onReleased:  {
            if(cursorPosition == maximumLength){
                textInput3.focus = true;
            }
        }
        Keys.onPressed: {
            if((event.key == Qt.Key_Left) && (cursorPosition == 0)){
                textInput1.focus = true; textInput1.cursorPosition = 2;
            }
        }
        onFocusChanged: {
            color = (focus) ? focuscolor : ipcolor;
            makeIpAddress();
            cursorPosition = 0;
        }
    }
    Text{
        id: ipDot2
        font.pixelSize: ipFontSize
        x: textInput2.x + textInput2.width
        y: textInput1.y
        color: ipcolor
        text:"."
    }

    TextInput {
        id: textInput3
        x: posX + 2*space + 2*partwidth +ipDot2.width
        y: posY
        width: partwidth
        font.pixelSize: ipFontSize
        KeyNavigation.tab: textInput4
        Keys.onReturnPressed:
        {
            textInput4.focus = true;
        }

        color: ipcolor
        validator: IntValidator {bottom:0; top:999}
        inputMask: "000;"
        inputMethodHints: Qt.ImhDigitsOnly
        maximumLength: 3
        Keys.onReleased:  {
            if(cursorPosition == maximumLength){
                textInput4.focus = true;
            }
        }
        Keys.onPressed: {
            if((event.key == Qt.Key_Left) && (cursorPosition == 0)){
                textInput2.focus = true; textInput2.cursorPosition = 2;
            }
        }
        onFocusChanged: {
            color = (focus) ? focuscolor : ipcolor;
            makeIpAddress();
            cursorPosition = 0;
        }
    }
    Text{
        id: ipDot3
        font.pixelSize: ipFontSize
        x: textInput3.x + textInput3.width
        y: textInput1.y
        color: ipcolor
        text:"."
    }

    TextInput {
        id: textInput4
        x: posX + 3*space + 3*partwidth + ipDot3.width
        y: posY
        width: partwidth
        font.pixelSize: ipFontSize
        KeyNavigation.tab: textInput1
        Keys.onReturnPressed:
        {
            textInput1.focus = true;
        }

        color: ipcolor
        validator: IntValidator {bottom:0; top:999}
        inputMask: "000;"
        inputMethodHints: Qt.ImhDigitsOnly
        maximumLength: 3
        Keys.onReleased:  {
            if(cursorPosition == maximumLength){
                textInput1.focus = true;
            }
        }
        Keys.onPressed: {
            if((event.key == Qt.Key_Left) && (cursorPosition == 0)){
                textInput3.focus = true; textInput3.cursorPosition = 2;
            }
        }
        onFocusChanged: {
            color = (focus) ? focuscolor : ipcolor;
            makeIpAddress();
            cursorPosition = 0;
        }
    }
}