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

问题描述

看图:

我想要设计类似于图片中的内容，其中用户需要输入 4 位数字一次性密码 (OTP).现在我已经通过 4 个单独的输入实现了这一点，然后在 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"/>

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

解决方案

你不必保留 4 个单独的字段；

首先要调整字符间距，然后调整底部的边框样式...

#partitioned {左边距:15px；字母间距:42px；边框:0；背景图像:线性渐变(向左，黑色 70%，rgba(255, 255, 255, 0) 0%)；背景位置:底部；背景尺寸:50px 1px；背景重复:重复-x；背景位置-x:35px；宽度:220px；}

--编辑以修复 4 个字符丑陋的 5 个下划线--

var obj = document.getElementById('partitioned');obj.addEventListener('keydown', stopCarret);obj.addEventListener('keyup', stopCarret);函数 stopCarret() {if (obj.value.length > 3){setCaretPosition(obj, 3);}}函数 setCaretPosition(elem, caretPos) {如果(元素！= null){如果(elem.createTextRange){var range = elem.createTextRange();range.move('character', caretPos);范围选择()；}别的 {如果(元素.选择开始){elem.focus();elem.setSelectionRange(caretPos, caretPos);}别的elem.focus();}}}

#partitioned {左边距:15px；字母间距:42px；边框:0；背景图像:线性渐变(向左，黑色 70%，rgba(255, 255, 255, 0) 0%)；背景位置:底部；背景尺寸:50px 1px；背景重复:重复-x；背景位置-x:35px；宽度:220px；最小宽度:220px；}#divInner{左:0；位置:粘性；}#divOuter{宽度:190px；溢出:隐藏；}

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

我认为这可以作为一个起点...希望这会有所帮助...

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屋！