如何将输入字段分区以在屏幕上显示为单独的输入字段？ [英] How to partition input field to appear as separate input fields on screen?

问题描述

看看图像：

I想要像图像那样设计一个4位数的一次性密码（OTP）由用户输入。现在我已经通过4个单独的输入实现了这一点，然后在javascript中组合值：

 < input type =textclass =form-controlplaceholder =0maxlength =1/> 
< input type =textclass =form-controlplaceholder =0maxlength =1/> 
< input type =textclass =form-controlplaceholder =0maxlength =1/> 
< input type =textclass =form-controlplaceholder =0maxlength =1/> 
  

我不确定这是否正确。我认为必须有一些样式选项，通过这些选项，一个输入文本框会像图像一样显示为分区。是否有可能使用引导程序？如何将一个输入控件的样式设置为输入的分区字段？

解决方案

您不必保留4个单独的字段;

首先，您应该调整字符间距，并调整底部的边框样式...

  #partitioned {padding-left：15px; letter-spacing：42px; border：0; background-image：线性渐变（向左，黑色70％，rgba（255,255,255,0）0％）; background-position：bottom; background-size：50px 1px; background-repeat：repeat-x; background-position-x：35px; width：220px;}  

< input id =partitioned type =textmaxlength =4/>

- 编辑修复5个下划线为4个字符丑 - - $ / b> data-console =truedata-babel =false>

var obj = document.getElementById（'partitioned'）; obj.addEventListener（keydown，stopCarret）; obj.addEventListener（keyup，stopCarret）;函数stopCarret（）{if（obj.value.length> 3）{setCaretPosition（obj，3）; }} function setCaretPosition（elem，caretPos）{if（elem！= null）{if（elem.createTextRange）{var range = elem.createTextRange（）; range.move（'character'，caretPos）; range.select（）; } else {if（elem.selectionStart）{elem.focus（）; elem.setSelectionRange（caretPos，caretPos）; } else elem.focus（）; }}}

  #partitioned {padding-left：15px; letter-spacing：42px; border：0; background-image：线性渐变（向左，黑色70％，rgba（255,255,255,0）0％）; background-position：bottom; background-size：50px 1px; background-repeat：repeat-x; background-position-x：35px; width：220px; min-width：220px;}＃divInner {left：0; position：sticky;}＃divOuter {width：190px; overflow：hidden}  

< div id =divOuter > < div id =divInner> < input id =partitionedtype =textmaxlength =4/> < / div>< div>

成为一个起点......
希望这会有所帮助......

Look at the image:

I want design something like in the image, where a 4 digit one time password (OTP) is to be entered by user. Right now I have achieved this by 4 separate inputs and then combining values in javascript:

<input type="text" class="form-control" placeholder="0" maxlength="1"  />
<input type="text" class="form-control" placeholder="0" maxlength="1" />
<input type="text" class="form-control" placeholder="0" maxlength="1" />
<input type="text" class="form-control" placeholder="0" maxlength="1" />

I am not sure if this is correct approach. I think there must be some styling options by which one input textbox would appear as partitioned one like in the image. Is it possible using bootstrap? How to style one input control to be appeared as partitioned field of inputs?

解决方案

You dont have to keep 4 separate fields;

First you should adjust the character spacing, and than adjust border style of bottom...

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
}

<input id="partitioned" type="text" maxlength="4" />

--EDIT to fix 5 underlines for 4 character ugliness--

var obj = document.getElementById('partitioned');
obj.addEventListener("keydown", stopCarret); 
obj.addEventListener("keyup", stopCarret); 

function stopCarret() {
	if (obj.value.length > 3){
		setCaretPosition(obj, 3);
	}
}

function setCaretPosition(elem, caretPos) {
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  min-width:220px;
}

#divInner{
  left: 0;
  position: sticky;
}

#divOuter{
  width:190px; 
  overflow:hidden
}

<div id="divOuter">
	<div id="divInner">
		<input id="partitioned" type="text" maxlength="4" />
	</div>
<div>

I think this can be a starting point... hope this will help...

这篇关于如何将输入字段分区以在屏幕上显示为单独的输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！