首先来看一下office的授权,产品密钥输入方式
当键盘随意输入字母会自动转成大写状态,然后每个五个字符会自动填入分隔符“-”,并且不能手动输入分隔符或者其他特殊字符。
然后还有一项 特殊功能,如果是拷贝一串内容直接粘贴进去,会自动进行格式化,比如输入
asga--hbDADS-ADQDSAD-
然后就自动格式化成如下:
ASGAH-BDADS-ADQDS-AD
看图:

ok,接下里分享使用QML来实现此效果。
本文Demo下载在这里
先来看看实现效果:

代码实现:
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.VirtualKeyboard 2.15TextField {id: controlplaceholderText:qsTr("XXXXX-XXXXX-XXXXX-XXXXX-XXXXX")font.pixelSize: 13font.family: "微软雅黑"placeholderTextColor: "#A5A5A5"color: "#1D2129"focus: trueselectByMouse: truevalidator: RegExpValidator { regExp:/^[0-9A-Za-z|\-]+$/}background: Rectangle {implicitWidth: 330implicitHeight: 30color: "#F2F3F5"border.color: "#0068B4"}property bool isDelete: falseproperty bool isPaste: falsemaximumLength: 29//200Keys.onPressed: {event.accepted = (event.text==="-") //过滤键盘输入-isDelete = (event.key === Qt.Key_Backspace)isPaste = (event.modifiers === Qt.ControlModifier && event.key === Qt.Key_V)}onTextChanged: {control.text = control.text.toUpperCase();if(isPaste){control.text = checkFormat(control.text)return}let temp = control.textif(!isDelete){if(length === 5){temp += "-"}else if(length > 6 && (length - 5) % 6 === 0){temp += "-"}temp = checkFormat(temp)control.text = temp}isDelete = falseisPaste = false}function checkFormat(text){let newText = text.split("-").join("")var index = 0while(index < newText.length){if((index+1) %6 === 0){newText = newText.slice(0, index) + "-" + newText.slice(index)index++}index++}return newText}
}
限制只能输入数字和字母,由于还要自动输入分隔符,所以还要加上“-”
validator: RegExpValidator { regExp:/^[0-9A-Za-z|\-]+$/}
但是要限制用户手动输入分隔符,所以需要监控键盘事件,限制分隔符输入
event.accepted = (event.text==="-") //过滤键盘输入-
由于分隔符是自动添加的,不能手动输入,在每输入满五个字符后自动添加“-”,但是如果是向后删除字符,也会满足“自动添加分隔符”的条件,但是在删除的时候又不能自动添加分隔符,所以需要区分当前是否在向后删除。
通过捕捉键盘事件来确定是否在删除:
isDelete = (event.key === Qt.Key_Backspace)
同样,如果是复制粘贴,onTextChanged一下捕捉到一整串字符串,这时候就直接检查内容并进行格式化即可,所以捕捉粘贴快捷键
isPaste = (event.modifiers === Qt.ControlModifier && event.key === Qt.Key_V)
最后,检查输入的内容,并进行格式化,这一步很重要:
function checkFormat(text){if(text.length < 6){return text}let newText = text.split("-").join("")var index = 0while(index < newText.length){if((index+1) %6 === 0){newText = newText.slice(0, index) + "-" + newText.slice(index)index++}index++}return newText}
先将字符串中的分隔符去掉text.split("-").join(""),然后通过循环逐一检查即可。
本文Demo下载在这里