当前位置: 首页 > 编程日记 > 正文

vue下实现textarea类似密码框的功能之探索input输入框keyup,keydown,input事件的触发顺序...

项目中引入element的input框组件,触发事件必须要加上.native

 <el-input placeholder="请输入" type="textarea" v-model="valueText" @keyup.native="keyUp(valueText,$event)"  @keydown.native="keyDown($event)" @input="input"></el-input>
复制代码
keyDown(event:any){//ctrl复制粘贴事件(true|false)this.isCtrl = event.ctrlKeyconsole.log('keyDown:',this.isCtrl)
}
input(value:any){let newStr='';this.valueCtrl = ''let str = value.substring(value.length-1,value.length);this.valueyArr.push(str);for (let i = 0; i < this.valueyArr.length; i++) {newStr+= this.valueyArr[i]}this.valueShow = newStr // 输入的明文if(value.length<this.appPrivateKeyShow.length){//退格删除this.appPrivateKeyArr = this.appPrivateKeyArr.slice(0,value.length)this.appPrivateKeyShow = this.appPrivateKeyShow.substring(0,value.length)}console.log('input:',this.valueShow)
}
keyUp(value:any,event:any){if(this.isCtrl&&!this.valueCtrl){this.valueCtrl = value //  粘贴的明文this.valueShow = ''}this.valueText =  value.replace(/./g, '.'); // 替换成密文点点console.log('keyUp:',this.valueCtrl)
}
复制代码

纯手动输入:

带键盘ctrl事件:

可以发现执行顺序:keydown>input>keyup 所以必须在keyup事件中将输入的东西替换成点点点,才能达到了密码框的效果,否则无法存储到对应的明文来传给后台

相关文章:

【C++】动态内存管理/move/以及移动构造与移动赋值运算符

文章目录1 .对象移动与右值引用 实际应用过程中遇到的问题及其解决方案c中临时变量不能作为非const的引用参数2. 动态内存管理类3. 对象移动与右值引用4. 移动构造与移动复制运算符1 .对象移动与右值引用 实际应用过程中遇到的问题及其解决方案 问题描述&#xff1a; bool Cr…

图像直接卷积 Sobel 边缘实现

bool sobelEdge(const cv::Mat& srcImage, cv::Mat& resultImage,uchar threshold) {CV_Assert(srcImage.channels() 1);// 初始化水平核因子Mat sobelx (Mat_<double>(3, 3) << 1, 0,-1, 2, 0, -2, 1, 0, -1);// 初始化垂直核因子Mat sobely (Mat_&…

JSON.parse解析特殊字符报错解决方案

2019独角兽企业重金招聘Python工程师标准>>> 具体案例&#xff1a; 页面点击”下一任务” 会去请求后台&#xff0c;这里出现的问题是有虚拟任务的时候。然后会返回一个map&#xff0c;也就是如下图中回调函数中的data。 当该map里存有以下字符的时候&#xff1a; \…

MySQL数据库字符集和整理

MySQL数据库字符集和整理(2009-11-20 22:23:37)mysql数据库 it 其实这个表在MySQL数据库中通过phpMyAdmin就能看到&#xff0c;icech只是把表格整理了一下方便大家使用&#xff0c;如果要更换数据库的字符集&#xff0c;心里有数。其中有三种utf8_general_ci、utf8_unicode_ci…

【SLAM后端】—— ceres优化相机位姿求解

求解结果如下&#xff1a; mat 初始化&#xff0c;eigenvalue初始化 Mat K ( Mat_<double> ( 3,3 ) << 520.9, 0, 325.1, 0, 521.0, 249.7, 0, 0, 1 );Eigen::Matrix<float,3,1> vd_3d;v_3d << 3, 2, 1;求解目标函数结构体构造与实例 struct CurveFi…

SPOJ 1811 LCS [后缀自动机]

题意&#xff1a; 求两个串的最大连续子串 一个串建SAM&#xff0c;另一个串在上面跑 注意如果走了Suffix Link&#xff0c;sum需要更新为t[u].val1 Suffix Link有点像失配吧&#xff0c;当前状态s走不了了就到Suffix Link指向的状态fa上去&#xff0c;fa是s的后缀所以是可行的…

图像卷积下非极大值抑制 Sobel 的实现

bool sobelOptaEdge(const cv::Mat& srcImage, cv::Mat& resultImage, int flag) {CV_Assert(srcImage.channels() 1);// 初始化sobel水平核因子cv::Mat sobelX (cv::Mat_<double>(3, 3) << 1, 0, -1,2, 0, -2, 1, 0, -1);// 初始化sebel垂直核因子cv::…

was unable to refresh its cache! status = Cannot execute request on any known server

出现这种错误是因为: Eureka服务注册中心也会将自己作为客户端来尝试注册它自己&#xff0c;所以我们需要禁用它的客户端注册行为。 在 yml中设置 eureka.client.register-with-eurekafalse eureka.client.fetch-registryfalse 但在服务端是要这是为false的&#xff0c;在客…

【C++】浅析析构函数(基类中)为什么要写成虚基类?

为什么有了虚析构函数&#xff0c;就能先调用子类的析构函数&#xff1f; class A {virtual ~A(){} };class B : A {virtual ~B(){} };A *p new B(); delete p; 唯一差别是&#xff0c;每个析构函数结束时会自动&#xff08;隐含地&#xff09;调上父类的析构函数&#xff0…

Roberts 边缘检测

#include <opencv2/opencv.hpp> // roberts算子实现 cv::Mat roberts(cv::Mat srcImage) {cv::Mat dstImage srcImage.clone();int nRows dstImage.rows;int nCols dstImage.cols;for (int i 0; i < nRows - 1; i){for (int j 0; j < nCols - 1; j){// 根据公…

vector、map删除当前记录

map<string, string> sMap; map<string, string>::iterator iter; for(iter sMap.begin();iter ! sMap.end();/* iter */) {sMap.erase(iter); }注意下列错误表达&#xff1a;1. for(iter sMap.begin();iter ! sMap.end(); iter ) {sMap.erase(iter); } 错误原因…

1-2 postman工具简介

postman提供了一个多窗口和多选项卡页面用于发送和接受请求&#xff0c;postman努力保持整洁和灵活&#xff0c;提供更多的空间&#xff0c;满足用户的需要。他很简单&#xff0c;能满足大部分接口的测试&#xff0c;性价比特别高。如图所示&#xff1a; 1.侧边栏 postman的侧边…

【C++】重载运算符(一)

1.1 重载运算符特点 重载运算符本质上是一次函数调用 除了operator() 运算符调用外&#xff0c;其他重载运算符不能含有默认参数。 当重载的运算符是成员函数时&#xff0c;this绑定到左侧运算对象。成员运算符函数&#xff08;显式&#xff09;的参数数量比运算对象少一个。…

javaScript的调试(二)

2019独角兽企业重金招聘Python工程师标准>>> 一、Firebug Firebug是Firefox浏览器的调试工具&#xff0c;只要我们在Firefox中安装了Firebug应用&#xff0c;就可以按F12或右击鼠标开启调试 那么我们就先来看一下如何在Firefox中安装了Firebug应用&#xff0c;一图剩…

Prewitt 边缘检测

#include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include "opencv2/imgproc/imgproc.hpp" #include <iostream> // prewitt算子实现 cv::Mat prewitts(cv::Mat img, bool verFlag false) {img.convertTo(img, CV_32FC…

[swift 进阶]读书笔记-第十一章:互用性 C11P1 实践:封装 CommonMark

第十一章&#xff1a;互用性 Interoperability 前言&#xff1a; swift 的最大优点就是与C 或者 OC 混编的时候稳的一匹 本章主要讲了swift和C之间的一些知识点。 11.1 实践:封装 CommonMark Hands-On: Wrapping CommonMark 这一小节更像是一个教程。教你如何封装C语言中的Comm…

【Cmake】Cmake学习记录

Cmake学习记录 1.1 常例 add_library(gen_reference_infogen_reference_info/gen_reference_info.hgen_reference_info/gen_reference_info.cc ) target_link_libraries(gen_reference_infoparamsimage_preprocessorcenter_extractorremapperdescriptor_generator${OpenCV_LI…

MySQL(三)用正则表达式搜索

正则表达式是用来匹配文本的特殊的串&#xff08;字符集合&#xff09;&#xff0c;将一个模式&#xff08;正则表达式&#xff09;与一个文本串进行比较&#xff1b; 所有种类的程序设计语言、文本编辑器、操作系统等都支持正则表达式&#xff0c;正则表达式用正则表达式语言来…

计算梯度幅值与方向

Mat magX Mat(src.rows, src.cols, CV_32F); Mat magY Mat(src.rows, src.cols, CV_32F); Sobel(image, magX, CV_32F, 1, 0, 3); Sobel(image, magY, CV_32F, 0, 1, 3); // 计算斜率 Mat slopes Mat(image.rows, image.cols, CV_32F); divide(magY, magX, slopes); // 计…

好程序员web前端技术分享媒体查询

为什么80%的码农都做不了架构师&#xff1f;>>> 好程序员web前端技术分享媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性&#xff08;如视口宽度、屏幕比例、设备方向&#xff1a;横向或纵向&#xff09;为其设定CSS样式&#xff0c;媒体查询由媒…

【C++】重载运算符(二)

1.4 下标运算符p501 下标运算符必须是成员函数&#xff0c;表示容器的类通常可以通过容器中的位置访问元素&#xff0c;定义下标运算符operator[]一个包含下标运算符的类&#xff0c;通常&#xff0c;定义2个版本&#xff1a;一个返回普通引用&#xff0c;另一个是类的常量成员…

手动建库11.2.0.4

环境&#xff1a; oracle11.2.0.4 redhat6.2 在上篇文章中&#xff0c;我们只安装了oracle&#xff0c;还没有建立实例&#xff0c;本篇文章就来介绍如果手动建立实例。 1.创建密码文件&#xff08;password file&#xff09;----非必要 cd $ORACLE_HOME/dbs/ 查看是否有init.o…

滞后阈值边缘连接

// 边缘连接 void followEdges(int x, int y, Mat &magnitude, int tUpper,int tLower, Mat &edges) { edges.at<float>(y, x) 255; for (int i -1; i < 2; i) {for (int j -1; j < 2; j) {// 边界限制if((i ! 0) && (j ! 0) && (…

《复联4》的这波操作,其实是在灭 bug

前方涉及剧透&#xff0c;请谨慎阅读&#xff01;&#xff01;&#xff01;前方涉及剧透&#xff0c;请谨慎阅读&#xff01;&#xff01;&#xff01;前方涉及剧透&#xff0c;请谨慎阅读&#xff01;&#xff01;&#xff01;↓↓↓Q1:您是否看了《复联4》&#xff1f;A、已看…

【C++】容器与继承

容器与继承 Exercise 15.28: Define a vector to hold Quote objects but put Bulk_quote objects into that vector. Compute the total net_price of all the elements in the vector. Exercise 15.29: Repeat your program, but this time store shared_ptrs to objects…

1.3 使用jmeter进行http接口测试

来源&#xff1a; http://www.cnblogs.com/alisapan/p/6150309.html 此篇纯是搬运记载。。 一、测试需求描述 1、 本次测试的接口为http服务端接口 2、 接口的主要分成两类&#xff0c;一类提供给查询功能接口&#xff0c;一类提供保存数据功能接口&#xff0c;这里我们举例2个…

opencv 自带库Canny边缘检测

#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" int main( ) {// 读取源图像并转化为灰度图像cv::Mat srcImage cv::imread("..\\images\\flower.jpg",0);// 判断文件是否读入正确if( !srcImage.data ) retur…

git branch

git basic branch git branch <branchName>#create branch git branch --list#show branch list, git checkout <branchName>#choose branch,HEAD is pointer of the current branch last commit 复制代码create a file in branch 0.0.1,then checkout master ,mer…

读书笔记 effective c++ Item 5 了解c++默认生成并调用的函数

1 编译器会默认生成哪些函数 什么时候空类不再是一个空类&#xff1f;答案是用c处理的空类。如果你自己不声明&#xff0c;编译器会为你声明它们自己版本的拷贝构造函数&#xff0c;拷贝赋值运算符和析构函数&#xff0c;如果你一个构造函数都没有声明&#xff0c;编译器同样…

git tag学习记录(二)

文章目录1. git 工原理示意2. git tag记录2.1 git tag查看已有tag列表2.2 git tag标记当前分支上的 tag信息为-a v1.5.4 -m&#xff08;给指定的commit打Tag&#xff09;2.3 git push origin v1.5.4推送上一步打tag的分支到远程1. git 工原理示意 工作流程 TortoiseGit 2. g…