验证码怎么输入才正确(带横线验证码怎么输入才正确)

香肠派对的验证码是几位数

我最近制作了一个H5页面，其中包含验证码输入交互，这是在移动终端上更常见的验证码输入交互的类型。是的，是的，是数字，下划线，是移动终端上验证码交互的一种非常常见的类型。实施过程主要是指美团外卖Android的具体交互。 应用于项目的效果如下。 General operation。gif粘贴效果方案选择方案1：调整文本的间距并设置输入的字母间距属性，我们可以使验证码之间的间隙足够大，然后将底行更改为多行有间隔的段看起来可以做到。 但是，这里有问题。也就是说，光标将始终位于数字的左侧，我们希望输入后的数字中心位于原始光标位置。最终我放弃了计划。 显然，此解决方案不合适。 解决方案2：使用多个输入这是我的使用方式，这是我接下来将详细解释的解决方案。主要原理是：使用多个输入元素，每个输入只能输入一个数字。通过输入事件检测到字符输入时，焦点将自动聚焦在下一个输入元素上。 当然，在单击任何输入框时，我们还需要将焦点移至值为空的输入。此外，单击退格键时，还需要更改焦点。 测试后，我发现焦点的移动不会导致移动键盘崩溃。最后，我决定使用此解决方案。

带横线验证码怎么输入才正确

代码实现在线示例：https://codepen。io/F-star/pen/dyyeZaNHTML：{onInput（e。target。value，索引）}“ @ keydown。delete =” e =》 {onKeydown（ e。target。value，index）}“ @ focus =” onFocus“：已禁用=” loading“》 {{msg}}CSS：。captcha {display：flex;margin-top：40px;}输入{margin-right：20px;宽度：45像素；文本对齐：居中；边界：无； border-bottom：1px实心eee; font-size：24px;轮廓：无；}输入：最后一个类型{右边距：0；}输入：禁用{颜色：000；背景颜色：fff;}。 msg {text-align：center;} JS：

怎么输入加减数字验证码

var Main = {data（）{返回{ct：【’’，’’，``，’’，``，’’】，加载：false，msg： ”，}}，计算公式为：{ctSize（）{返回this。ct。长度；}，cIndex（）{让我= this。ct。findIndex（item =》 item ===’’）; i =（i + this。ctSize）％this。ctSize; return i;}，lastCode（）{返回this。ct 【this。ctSize-1】;}}，观看：{cIndex（）{this。resetCaret（）;}，lastCode（val）{if（val）{控制台。log（’this。ctSize’，this。ctSize）this。sendCaptcha（）;}}}，已安装（）{this。resetCaret（）;}，方法：{onInput（val，index）{this。msg =’’val = val。replace（/ \ s / g， ’’）; if（index == this。ctSize-1）{this。ct 【this。ctSize-1】 = val 【0】; //最后一个代码，仅允许一个字符。 } else if（val。length》 1）{let i = index;对于（i =索引; i item ===’’）; index =（索引+ this。ctSize）％this。ctSize; console。log（this。$ refs。input）此。 $ refs。input 【index】 。focus（）;}，onKeydown（val，index）{if（val ===’’）{//从前一个输入中删除值，然后将其聚焦。 if（index》 0）{this。ct 【index-1】 =’’;这个。 $ refs。input 【index-1】 。focus（）;}}}，sendCaptcha（）{console。log（）; this 。msg =将验证码发送到服务器：$ {this。ct。join（’’）}`;。 this。loading = true; setTimeout（（）=》 {this。msg =（’验证码错误’）this。loading = false; this。$ nextTick（（）=》 {this。reset（）;}）}，3000）}，重置（ ） {// 重启。通常在验证码错误时触发。 this。ct = this。ct。map（item =》’’）; this。resetCaret（）;）））var Ctor = Vue。extend（Main）new Ctor（）。 $ mount（’app’）多个输入元素，所有这些元素都绑定到焦点事件。触发此事件后，我们会将焦点从左至右移至输入，其第一个值为空字符。因此，在初始状态下，如果单击最右边的输入，光标仍将运行到最左边的输入。 然后，我们将输入事件绑定到这些输入并监听输入字符。当输入字符不是空字符时，我们将重新定位需要聚焦的下一个输入，例如焦点事件。如果输入多个字符（通常是由于粘贴），则多余的字符将按顺序一个接一个地填充到以下输入中，然后将光标重新定位。这样，我们实现了一个一个输入数字和粘贴SMS验证码（一次输入多个数字）的交互作用。 最后，我们还需要处理退格行为。我们需要将keydown事件绑定到所有输入。当按退格键并且当前输入的值为空时，将清除前一个输入中的数据，并且焦点将集中在前一个输入上。 是，在输入错误的验证码之后，需要清除所有输入数据。摘要原理并不复杂，实施起来有点繁琐。 我的解决方案与浏览器不兼容。经过充分测试后，请使用它。 如果可能，我仍然建议使用简单的输入框解决方案，而不是选择这种花哨的交互方式。简单，稳定的实现和维护很简单，不会有很多意外情况。因为如果在此处输入验证码，它将无法在某些浏览器上正常工作，这将对转换率产生很大的影响。