QML TextField实现注册码输入控件,自动填入分隔符,粘贴内容格式化
创始人
2024-04-04 16:36:59
0

前言

首先来看一下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下载在这里


相关内容

热门资讯

华谊兄弟深陷法律与财务漩涡 近日,中国影视巨头华谊兄弟及其创始人深陷法律与财务漩涡。 据天眼查官网显示,近日华谊兄弟旗下两家核心...
如何将制度优势变为“现金流”?... 2025年12月18日,海南全岛封关运作正式启动。这一天,被有意地与47年前——1978年12月18...
北京警方:5名犯罪嫌疑人均已抓... 导 读 “就剐蹭了一下,居然要我赔10万?” 近日,北京海淀警方经过侦查打掉一个做局“碰瓷”的敲诈勒...
锂矿龙头涉嫌内幕交易罪单位犯罪... 【大河财立方消息】12月29日,赣锋锂业发布公告,公司于当日收到宜春市公安局的移送起诉告知书,因涉嫌...
赣锋锂业:2025年涉内幕交易... 【赣锋锂业因涉嫌内幕交易罪被移送起诉】12月29日,赣锋锂业(002460.SZ)公告透露,2025...
严重职务违法、涉嫌受贿犯罪!许... 【导读】中国工商银行云南省分行原党委书记、行长许海被开除党籍 中国基金报记者 晨曦 又有国有大行干部...
《安顺市黄果树旅游景区建设促进... 人民网安顺12月29日电 (记者王秀芳)12月29日,记者从安顺市相关新闻发布会上获悉,《安顺市黄果...
涉嫌内幕交易罪单位犯罪,赣锋锂... 12月29日,赣锋锂业(002460.SZ)公告称,公司于2025年12月29日收到宜春市公安局的移...
学前儿童学籍管理出台新政策,教... 近日,教育部印发了《全国学前儿童学籍管理办法(试行)》(以下简称《办法》)。教育部基础教育司负责人就...
华测检测:关注国家区域发展战略... 有投资者在互动平台向华测检测提问:“请问海南封关后对贵公司在海南的进出口商品检验检疫订单增长是否有帮...