<div class="inputBox" @touchstart="touchin()" @touchend="clickhandle()" @click="onlyClick">
<input type="text">
<div class="pasteBox" v-if="Loop==0" @click="pasteClick()">粘贴</div>
<div
class="slot-dialog-content"
@touchstart="copyStart('cardNum')"
@touchend="copyEnd('cardNum')"
>
<p class="slot-dialog-content-p">复制卡号: {{ cardNumFilter }}</p>
<!-- <p class="slot-dialog-content-p" v-if="cardType == '0'">CVV2: {{ yzm }}</p> -->
</div>
<img @click.stop="$_photograph" slot="right" class="cameraImg" src="../assets/images/xiangji.png"/>
</div>
<script>
// 拍照事件
$_photograph(){
// 调用ocr
// 如果没有权限
if(result.notAuthorized){
// 关闭添加借记卡弹框
this.dialogNoticeIs = false
this.textInput = ''
this.$refs.input0.isInputFocus = false
this.close()
// 展示提示弹框
message: isIOS ? "请在手机'设置'-'隐私'-'相机'里打开权限" : "请在手机“设置”中打开“相机”权限",
}else{
this.textInput = this.$_trimValue(result.kCardNumber) || '';
}
console.log(JSON.stringify(result.kCardNumber)+"_______________________")
},
$_trimValue(value) {
return value.replace(/\s/g, '')
},
touchin(){ // 长按事件,按住后等待指定事件触发
if(isAndroid){
this.Loop = setTimeout( ()=> {
this.Loop = 0;
console.log("长按触发")
}, 500);
return false;
}
},
clickhandle() { // 模拟点击事件(点击后迅速抬起)
if(isAndroid){
clearTimeout(this.Loop);
if(this.Loop!==0){
console.log("点击事件")
}
return false;
}
},
// input点击事件
onlyClick(){
if(isIOS){
if(this.$refs.input0.isInputFocus){
if(!this.isFirst){
this.Loop = 0;
}
this.isFirst = false;
}
}
},
// 粘贴按钮点击事件
pasteClick(){
console.log('粘贴')
// 隐藏按钮
this.Loop = 1;
// 接受粘贴板内容
const getPasteContent = result.result || '';
// 用于判断是否包含数字
const reg = /\d/;
// 成立代表包含数字,否则toast提示输入内容非法
if(reg.test(getPasteContent)){
// 过滤粘贴内容只保留数字
this.textInput = getPasteContent.replace(/[^\d]/g,"");
}
},
copyStart(item) {
clearTimeout(this.loop);
this.loop = setTimeout(() => {
// 去除空格
const cardNumFormat = this.cardNumFilter.replace(/\s*/g, '');
if (item === 'cardNum') {
}
this.showToast('复制成功');
}, 500);
},
copyEnd(item) {
clearTimeout(this.loop);
},
showToast(content) {
},
</script>
input框的ocr识别以及复制粘贴功能
于 2022-02-16 10:11:32 首次发布