diff --git a/examples/TaoQuickShow/Contents/General/DataEntrys.qml b/examples/TaoQuickShow/Contents/General/DataEntrys.qml index e97e651d..99faf792 100644 --- a/examples/TaoQuickShow/Contents/General/DataEntrys.qml +++ b/examples/TaoQuickShow/Contents/General/DataEntrys.qml @@ -145,5 +145,20 @@ Item { width: 200 } } + + CusLabel { + text: qsTr("IPv4") + trans.transString + wrapMode: Label.WordWrap + width: 400 + } + CusIPAddress { + id: ip + Component.onCompleted: { + inputIP("192.168.1.1") + } + } + CusLabel { + text: "IP Addr: " + (ip.isValid ? ip.ipAddr : "") + } } } diff --git a/src/TaoQuick/Qml/CusInput/CusIPAddress.qml b/src/TaoQuick/Qml/CusInput/CusIPAddress.qml index 4aa45bdf..7593bf51 100644 --- a/src/TaoQuick/Qml/CusInput/CusIPAddress.qml +++ b/src/TaoQuick/Qml/CusInput/CusIPAddress.qml @@ -4,58 +4,172 @@ import ".." import "../.." Rectangle { + id: control + implicitHeight: CusConfig.fixedHeight - implicitWidth: defaultW * 4 + 2 * 3 - property int defaultW: 40 -// border.color: { -// if (!enabled) { -// return CusConfig.controlBorderColor_disabled -// } else if (input1.focus || input2.focus || input3.focus || input4.focus) { -// return CusConfig.controlBorderColor_pressed -// } else if (transArea.containsMouse) { -// return CusConfig.controlBorderColor_hovered -// } else { -// return CusConfig.controlBorderColor -// } -// } + implicitWidth: 160 + border.width: 1 border.color: enabled && (transArea.containsMouse ||input1.focus || input2.focus || input3.focus || input4.focus) ? CusConfig.controlBorderColor_hovered : CusConfig.controlBorderColor radius: CusConfig.controlBorderRadius color: enabled ? CusConfig.controlColor : CusConfig.controlColor_disabled + + readonly property int paddingW: 4 + readonly property int dotW: 4 + readonly property int spacingW: 1 + property int inputW: (width - dotW * 3 - 6 * spacingW - paddingW * 2) / 4 + + property string ipAddr: input1.text + "." + input2.text + "." + input3.text + "." + input4.text + property bool isValid: input1.displayText.length > 0 && input2.displayText.length > 0 + && input3.displayText.length > 0 && input4.displayText.length > 0 + + function inputIP(ipAddr) { + var list = ipAddr.split('.'); + if (list.length === 4) { + input1.text = list[0] + input2.text = list[1] + input3.text = list[2] + input4.text = list[3] + } + } Row { - anchors.fill: parent - CusTextInput { - id: input1 - width: defaultW - validator: IntValidator{bottom: 1; top: 255;} + x: control.paddingW + width: control.width - control.paddingW * 2 + height: control.height + spacing: control.spacingW + CusTextInput { + id: input1 + height: parent.height + width: control.inputW + focus: true + activeFocusOnTab: true + verticalAlignment: Qt.AlignVCenter + horizontalAlignment: Qt.AlignHCenter + anchors.verticalCenter: parent.verticalCenter + validator: RegExpValidator{ + regExp: /^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/ + } + KeyNavigation.right: input2 + onTextChanged: { + if (text.length >= 3) { + input2.focus = true + } + } } - CusLabel { + Label { text: "." - width: 2 + height: parent.height + width: control.dotW + verticalAlignment: Qt.AlignBottom + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -8 } CusTextInput { id: input2 - width: defaultW - validator: IntValidator{bottom: 1; top: 255;} + height: parent.height + width: control.inputW + activeFocusOnTab: true + verticalAlignment: Qt.AlignVCenter + horizontalAlignment: Qt.AlignHCenter + anchors.verticalCenter: parent.verticalCenter + validator: RegExpValidator{ + regExp: /^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/ + } + KeyNavigation.backtab: input1 + KeyNavigation.tab: input3 + KeyNavigation.left: input1 + KeyNavigation.right: input3 + onTextChanged: { + if (text.length >= 3) { + input3.focus = true + } + } + Keys.enabled: true + Keys.onPressed: function (event) { + switch (event.key) { + case Qt.Key_Backspace: + { + if (focus && text.length <= 0) { + input1.focus = true + } + } + } + } } - CusLabel { + Label { text: "." - width: 2 + height: parent.height + width: control.dotW + verticalAlignment: Qt.AlignBottom + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -8 } CusTextInput { id: input3 - width: defaultW - validator: IntValidator{bottom: 1; top: 255;} + height: parent.height + width: control.inputW + activeFocusOnTab: true + verticalAlignment: Qt.AlignVCenter + horizontalAlignment: Qt.AlignHCenter + anchors.verticalCenter: parent.verticalCenter + + validator: RegExpValidator{ + regExp: /^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/ + } + KeyNavigation.backtab: input2 + KeyNavigation.tab: input4 + KeyNavigation.left: input2 + KeyNavigation.right: input4 + onTextChanged: { + if (text.length >= 3) { + input4.focus = true + } + } + Keys.enabled: true + Keys.onPressed: function (event) { + switch (event.key) { + case Qt.Key_Backspace: + { + if (focus && text.length <= 0) { + input2.focus = true + } + } + } + } } - CusLabel { + Label { text: "." - width: 2 + height: parent.height + width: control.dotW + verticalAlignment: Qt.AlignBottom + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -8 } CusTextInput { id: input4 - width: defaultW - validator: IntValidator{bottom: 1; top: 255;} + height: parent.height + width: control.inputW + activeFocusOnTab: true + verticalAlignment: Qt.AlignVCenter + horizontalAlignment: Qt.AlignHCenter + anchors.verticalCenter: parent.verticalCenter + validator: RegExpValidator{ + regExp: /^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/ + } + KeyNavigation.backtab: input3 + KeyNavigation.left: input3 + Keys.enabled: true + Keys.onPressed: function (event) { + switch (event.key) { + case Qt.Key_Backspace: + { + if (focus && text.length <= 0) { + input3.focus = true + } + } + } + } } } TransArea {