欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
一数量字电脑键盘引起的血案——手机端H5键入框
时间: 2021-03-04 04:13 浏览次数:
进到某网页页面全自动弹出来带小数点的数据电脑键盘,而且内置键入认证,例如额度——只有键入数据和小数点,而且只有键入一名小数点、小多位不超出2位,且键入前认证不符合法
进到某网页页面全自动弹出来带小数点的数据电脑键盘,而且内置键入认证,例如额度——只有键入数据和小数点,而且只有键入一名小数点、小多位不超出2位,且键入前认证不符合法也不让键入、(UE特加作用——订制鼠标光标色调 . 真是是反人们的要求)。细分化以下:  
(1)对于作用点1,能够给 input 设定特性 autofocus , 键入框就可以全自动聚焦点。 轻轻松松拿下   (2)对于作用点2 ,给input设定特性 autofocus 会全自动聚焦点可是电脑键盘其实不会全自动弹出来;   务必手动式点一下键入框电脑键盘才会弹出来; 因此在进到网页页面的情况下用js开启click或是foucus,发觉电脑键盘都不会全自动弹出来,廷时click、focus也未能弹出来;那麼仅有最终一种计划方案——便是让NA端出示让电脑键盘弹出来的方式。 纯前端开发没法拿下,必须NA端帮助/,或是找PM削掉全自动弹电脑键盘的要求 . (凑合可以接纳)   (3)对于作用点3,弹数据电脑键盘的方式能够设定 type = "number" 或是type = "tel"; 前面一种在Andriod能够弹出来数据电脑键盘在ios端只有弹全电脑键盘,后面一种在Android和ios弹出来的全是数据电脑键盘,可是!!坑爹的,弹出来的数据电脑键盘沒有小数点!(我的华为公司荣誉9倒是很贴心的帮我弹了个带小数点的数据电脑键盘,不可易啊啊) 只有挑选type = "number",凑合能接纳ios弹全电脑键盘吧   (4)对于作用点4, 设定type = "number",发觉能够不断的键入小数点啊啊 啊啊看见确实要疯掉,第一次键入小数点都不能全自动变为'0.'     这时候候聪慧的你一定想起要应用恶性事件监视输入的标识符,在键入以前开展分辨,随后决策是不是放进键入框。   你毫无疑问又会高兴的想起一堆将会有效的恶性事件:onkeydown,onkeyup,onchange,oninput,onpropertychange,textInput。     路漫漫其修远兮啊~历经持续试着以后依然发觉许多难题。  
onkeyup——尽管每提升删掉标识符都是开启,但提升标识符的情况下是值键入以后才开启,没法保证键入前认证;
onchange——是以内容更改(2次內容有将会相同)且丧失聚焦点时开启,也没法保证键入前认证。
onpropertychange——onchange恶性事件以内容更改(2次內容有将会還是相同的)且丧失聚焦点时开启;即每提升或删掉一字符便会开启,根据js更改也会开启该恶性事件,可是该恶性事件IE特有。
onkeyup——其才件有2个有关特性event.key和event.keyCode。event.key在我的华为公司荣誉9手机上上面不长效(别的低版本号手机上显而易见)。但其也有一个特性event.keyCode其在PC端的值是输入标识符的ascii码。但手中机端键入一切数据或是小数点其值均为229(华为公司荣誉9检测),因此onkeyup都不可用。
ontextInput——在pc和手机端都适用!!!(时间不辜负有心人)其event.data能够获得到键入的值。喜气洋洋,举国上下欢庆,啊嘿嘿~~
if (key.search(/[0-9\.]/) -1) { var value = document.getElementById('amount-input').value; if (key === '.' value.search(/\./) -1) { event.preventDefault(); if (value.search(/\.\d{2}/) -1) { event.preventDefault(); } else { event.preventDefault(); },   杯具再度产生了~~~~~我所期待的实际效果依然沒有做到。   根据value获得键入框中全部标识符不成功   发觉 input type = number 取到的value只有是标值,没法获得键入框里的全部标识符。   换句话说假如键入'12.',根据value获得到是'12',只键入'.',value获得到的是' '空标识符串,获得不上小数点。   那样就没法分辨是不是键入小数点,因此不可以分辨是不是还能键入小数点,那么就還是能键入成千上万个小数点,难题仍然无法得到处理。    
应用VUE中双重关联的this.amount来获得键入的全部标识符,发觉this.amount获得到的和value获得值的状况同样。试着不成功。
根据textInput获得到的键入值,自身维护保养一字符数字能量数组。可是textInput在删掉时不容易开启,因此不可以即时获得input键入框里边的全部准确标识符;并且因为没法获得鼠标光标在input键入框的实际部位而没法明确删掉的是哪一个标识符,因此标识符数字能量数组没法准确维护保养。试着不成功。
禁止使用手机上内置电脑键盘,在沒有NA曝露的方式适用的状况下,能够设定Input的readonly特性。那样得话键入框都不能加上删掉标识符了。   若在能够要NA端出示禁止使用手机上内置电脑键盘的方式的前提条件下,要完成点一下假电脑键盘键入框能加上删掉标识符。   倘若只从后边加上删掉,非常容易完成,只必须将点一下电脑键盘相匹配的标识符拼凑到 Input type=text获得到的value的后边,删掉同样。   可是如果鼠标光标没有最终一名,只是先在间   图2 鼠标光标在数据正中间实例图   那麼当我们们点一下假电脑键盘加上或删掉标识符的情况下,怎样能了解加上或删掉标识符的部位呢。   或许必须获得鼠标光标部位。   现阶段仅有IE和火狐浏览器适用的document.selection,selectionStart能够获得鼠标光标部位。  
// 获得鼠标光标部位
function getCursortPosition (textDom) {
 var cursorPos = 0;
 if (document.selection) {
 // IE Support
 textDom.focus ();
 var selectRange = document.selection.createRange();
 selectRange.moveStart ('character', -textDom.value.length);
 cursorPos = selectRange.text.length;
 }else if (textDom.selectionStart || textDom.selectionStart == '0') {
 // Firefox support
 cursorPos = textDom.selectionStart;
 return cursorPos;
}
  因为大家的是手机端H5开发设计新项目,考虑到适配性,显而易见之上方式不可以适配大部分分的型号。   3. 键入框、鼠标光标、数据电脑键盘全假完成计划方案   之上二种计划方案均无法完成,因而我只有胆大想像,要完成考虑之上要求的假电脑键盘就得完成假键入框、假鼠标光标、假keyboard的一套服备。那样全部的原素我还能操纵,上边的这些难题所有能够处理。     倘若完成只有从最终面提升删掉沒有鼠标光标的假电脑键盘十分非常容易,只必须给每一个键关联一个click恶性事件,维护保养一数量组,每一次从后边push或是pop就可以维护保养键入框中的內容。     可是那样跟正确实键入框实际效果比感受太差了。     要完成感受跟原生态电脑键盘一样而且内置键入认证的假电脑键盘,难题关键取决于:  
针对“点一下数据正中间鼠标光标全自动移以往 ”,能够每加上一数量字或是小数点就先加一个带点一下恶性事件的空原素space,再加上要键入的标识符。space是以便关联一个点一下恶性事件,告知鼠标光标要移动到的部位。  
//标识符插进,在鼠标光标前插进标识符
function insert(value) {
 var span = document.createElement("span"); //建立包括值的原素
 span.className = 'val';
 span.innerText = value;
 var space = document.createElement("span");
 space.className = 'space';
 space.addEventListener('click', moveCursor);
 var cursor = document.getElementsByClassName('cursor')[0];
 inputArea.insertBefore(space, cursor);//插进空列
 inputArea.insertBefore(span, cursor);//插进值
}
  删掉时也是先删掉鼠标光标以前的数据标识符,再删掉space原素。  
//删掉原素
function deleteElement() {
 setCursorFlash();
 var cursor = document.getElementsByClassName('cursor')[0];
 var n = 2; //2个删掉姿势
 while(cursor.previousSibling n 0) {
 inputArea.removeChild(cursor.previousSibling );
 n--;
 if(getInputStr().search(/^\.\d*/) -1) {
 insert(0);
 if(getInputStr() === ''){ //原素为空placeholder显示信息
 var placeHolder = document.getElementsByClassName('holder')[0];
 placeHolder.className = 'holder';
}
  根据chrome里边原素核查能看到加上删掉的全过程。   图16 加上、删掉、鼠标光标移动原素转变图   每个space原素都关联一个click恶性事件,用于移动鼠标光标,最右侧有一个right-space能够用于放placeholder,还可以加上click恶性事件,点一下岁月标一直挪到最终一名。  
//移动鼠标光标部位
function moveCursor(event) {
 var cursor = document.getElementsByClassName('cursor')[0];//获得鼠标光标
 if(event.currentTarget.className == 'right-space'){
 if(!cursor.nextSibling || cursor.nextSibling.nodeName == '#text'){
 return;
 } else {
 var ele = cursor.nextSibling;
 inputArea.insertBefore(inputArea.lastElementChild, ele);
 inputArea.appendChild(cursor);
 }else {
 var tempEle = event.currentTarget.nextSibling;
 // var nodeName = event.currentTarget.nextSibling.nodeName;
 // var cursor = document.getElementsByClassName('cursor')[0];
 if(!tempEle || tempEle.nodeName == '#text') {
 var temp = event.currentTarget.previousSibling;
 var ele = inputArea.replaceChild( event.currentTarget, cursor);//把鼠标光标更换成当今原素
 inputArea.appendChild(ele);
 } else {
 var temp = event.currentTarget.nextSibling;
 var ele = inputArea.replaceChild( event.currentTarget, cursor);//把鼠标光标更换成当今原素
 inputArea.insertBefore(ele, temp);
}
  从上边的GIF图能看出,鼠标光标自始至终仅有一个并且有一个定时执行每日任务。鼠标光标的闪烁设定以下,应用原生态的setInterval完成。  
//设定鼠标光标定时执行每日任务
function setCursorFlash() {
 //placeholder 掩藏
 var placeHolder = document.getElementsByClassName('holder')[0];
 placeHolder.className = 'holder hidden';
 var cursor = document.getElementsByClassName('cursor')[0];
 var inputContainer = document.getElementsByClassName('input-container')[0];
 cursor.className = "cursor";
 var isShowCursor = true;
 inputContainer.focus();
 showKeyBoard();
 if (intervalId) {
 clearInterval(intervalId);
 intervalId = setInterval(function() {
 isShowCursor = !isShowCursor;
 if (isShowCursor) {
 cursor.className = 'cursor';
 } else {
 cursor.className = 'cursor hidden';
 }, 1000);
}
  最后应用原生态js完成的带键入框、鼠标光标,keyboard的假数据电脑键盘。   除开进行之上作用,还完成了键入前认证作用,以便跟贴近真正键入框主要表现,同时完成了点一下键入框获得聚焦点、鼠标光标闪烁、弹出来电脑键盘;丧失聚焦点鼠标光标消退。   为何不应用jQuery?   一是由于,当今的H5新项目沒有应用jQuery。   二是由于应用VUE以后非常少必须立即实际操作DOM,极少数方式自身完成更轻量,倘若只求了应用其一2个方式而引进jQuery,会促使新项目更重。   原生态js完成实际效果   图5 原生态js完成键入框、鼠标光标、电脑键盘全假模块实际效果图 源代码DaisyWang88/js-keyboard   手机上扫二维码认证:   show/mvjrcagy ()   因为手机端click恶性事件有300毫秒廷时,因而原生态js完成的实际效果,有点儿并不是很顺畅。若应用原生态JS完成版的必须使fastclick或zepto的tap恶性事件处理廷时难题。   PS:以前说‘VUE自身处理300毫秒廷时难题’,资格证书以后发觉错误,给大伙儿产生困惑确实很抱歉。   资格证书以后发觉VUE的click恶性事件全是原生态的click并沒有解决这一廷时。
以便不许大伙儿困惑,github上的demo早已应用fastClick处理了廷时难题,(以前太懒了 . )。如今原生态的js完成实际效果也很畅顺了。    
考虑到到新项目里有的运用情景有好几个键入框,自然键入的情况下只必须一个电脑键盘,因而部件化的情况下将键入框做为一个部件v-input,电脑键盘做为一个部件v-keyboard。   键入框和电脑键盘的互动   互动图以下:   图6 VUE部件互动图   考虑到到本新项目里边存有一个网页页面好几个键入框的情景,因而必须操纵电脑键盘与哪一个键入框相互配合应用。   以便做到那样的目地,选用“当点一下键入框获得聚焦点的情况下,将当今v-input键入框部件的案例发送给v-keyboard电脑键盘部件”的方法。  
this.$refs.virtualKeyBoard.$emit('getInputVm', this.$refs.virtualInput);
  如图所示6 ,v-keyboard部件会监视'getInputVm'恶性事件,获得v-input的案例。   电脑键盘部件v-keyboard获得到键入框部件v-input的案例以后便可以依据电脑键盘的点一下恶性事件——加上或删掉,实际操作键入框部件v-input来放进或是删掉标识符了。   那样即便有好几个键入框,也便捷操纵电脑键盘和键入框中间的实际操作。   键入框全自动获得聚焦点,电脑键盘全自动弹出来   要求里规定进到某一网页页面键入框全自动获得聚焦点,电脑键盘全自动弹出来。  
要全自动弹出来电脑键盘如图所示6,必须在网页页面案例化进行以后将相对的键入框部件v-input的案例发送给电脑键盘部件v-keyboard。  
this.$refs.virtualKeyBoard.$emit('getInputVm', this.$refs.virtualInput);
  电脑键盘组间捕捉'getInputVm'恶性事件以后获得了相对键入框的案例,同时全自动弹出来。  
this.$on('getInputVm', function(obj) {
 this.refObject = obj;
 this.isShow = true;
});
  v-model适用   vue适用自定v-model,子部件设定一个value 的 props。  
props: {
 value: {
 type: String,
 default: '',
}
  在value更改的情况下$emit一个'input'恶性事件并把相对的值传来去便可以完成v-model的双重关联了。this.getInputStr()是用于获得键入框中标识符串的涵数。  
this.$emit('input', this.getInputStr());
  实际效果以下:    
源代码参照DaisyWang88/VUE-keyboard。

 

 

原生态的input 设定type = number,要想做键入前认证操纵小数点数量和小多位数等作用基本难以完成,要在键入前取到值也是存有各种各样适配性的问题,现阶段仅有ontextInput在手机端能在键入前准确取到值,也有个重要的难题type = number的情况下取到的value不包括小数点,造成键入前应用正则表达式认证基本上没法完成;倘若设定type= text 尽管能取到键入框中常有标识符,可是就没法弹出来数据电脑键盘。要想应用原生态input键入小数,就务必有一定的选择。

 

要不不做键入前认证,应用type = number ,能够键入好几个小数点,只在标值标值不符合法的情况下提醒键入不符合法,可是仅有android能够弹出来数据电脑键盘,IOS依然弹出来全电脑键盘。客户感受将会差些。

 

要不应用type = text,尽管能够保证键入前认证(由于能够取到所有标识符),可是全部型号都总是弹全电脑键盘了,客户感受也一般。

 

之上二种都没法完成进到网页页面电脑键盘全自动弹出来,只有依靠NA出示的方式完成。

 

假如你是逼迫症癌末期病人,客户感受以上者,那麼你也就能够跟我一样做下假电脑键盘,那样之上难题也不是难题。还能够加上额外作用,例如键入的情况下若在第一名键入小数点的情况下,前边全自动补'0';删掉的情况下,若小数点在第一名前边全自动补'0';还能够订制鼠标光标色调、电脑键盘款式这些。

很悲剧,我也是一个逼迫症癌末期病人,现阶段完成的电脑键盘模块更新改造成VUE部件早已取得成功在新项目中应用,有人下单键入框的网页页面,也是有多键入框的网页页面,适用placeholder 和v-model。

 

 

 


(转自知乎问答的一数量字电脑键盘引起的血案——手机端H5键入框、鼠标光标、数据电脑键盘全假模块完成,连接:p/)

上一篇:seo与sem差别?
下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园