Html 创建自定义输入文本类型_Html_Css

Html 创建自定义输入文本类型

html css

Html 创建自定义输入文本类型,html,css,Html,Css,我想做这个但我不知道如何制作正方形，也不知道如何设置，在一个正方形中只能输入一个字母。到目前为止，我写了这篇文章，但我真的不知道如何继续下去 .input{ 宽度：200px；边框：1px纯黑； } CNP 您可以使用javascript来实现，但让我们继续使用html5和css，如您所见：使用maxlenghtatribute： <input type="text" name="my_text[]" maxlength="1" style="float:left"> &l

我想做这个

但我不知道如何制作正方形，也不知道如何设置，在一个正方形中只能输入一个字母。到目前为止，我写了这篇文章，但我真的不知道如何继续下去

.input{
宽度：200px；
边框：1px纯黑；
}

CNP

您可以使用javascript来实现，但让我们继续使用html5和css，如您所见：

使用maxlenghtatribute：

<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">

记住创建一个类或使用引导类float left，我使用了内联css，但这不是一个好的实践

如果您需要在输入上使用不同的边框，可以使用css：

<input type="text" name="my_text[]" maxlength="1" class="my_text">
<style>
.my_text{
    border: 1px solid #000;
    float:left;
}
</style>


.我的短信{
边框：1px实心#000；
浮动：左；
}

更新：感谢@Danield的评论，我更新了更合适的装置

您可以使用线性渐变，但如果希望在一个槽中有一个字母，则需要注意不同的大小和字体系列：

.input{
/*每封信需要1ch+1px，我们删除最后一封信的1px*/
宽度：计算（15*（1ch+1px）-1px）；
边框：1px纯黑；
背景：
/*字母的1ch空格+1px边框*/
重复线性梯度（向右，#fff，#fff 1ch，#000 1ch，#000 calc（1ch+1px））；
字体大小：29px；
/*因为一封信需要1小时，我们加上1小时来覆盖边境*/
字母间距：1px；
/*我们使用单空格字体系列，因此所有字母的宽度都相同=1ch*/
字体系列：monospace；
}


这将适用于任何字体大小


实验室2（P6）
输入{
宽度：1.5em；
边框：1px纯黑；
}
CNP

请注意，CSS中的

input

元素是一个元素选择器。

您可以使用重复的线性渐变和间距来实现它，但是如果您想要添加自动制表符效果，您必须使用jquery，您可以在下面找到一个示例：

<body>
    <link  href="CSS/style.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Laborator 2(P6)</title>
    <label style="float:left; margin-right:5px;"><b>CNP</b></label>
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />     
    <style>
        body {
          padding: 20px;
        }

        form > div {
          margin: 0 0 20px 0;
        }

        .inputclass1 {
            width:20px;
            border: 1px solid black;
            float:left          
        }
    </style>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('input').keyup(function(){
            if($(this).val().length==$(this).attr("maxlength")){
                $(this).next().focus();
            }
        });
    });
</script>


实验室2（P6）
CNP
身体{
填充：20px；
}
表格>分区{
利润率：0.20px0；
}
.输入类别1{
宽度：20px；
边框：1px纯黑；
浮动：左
}
$（文档）.ready（函数（）{
$（'input'）.keyup（函数（）{
if（$（this.val（）.length==$（this.attr（“maxlength”））{
$（this.next（）.focus（）；
}
});
});

只需创建一个网络组件。只是吹毛求疵；）-

ch

单位在这里可能比px更合适，而且

字母间距：1px

可以考虑额外的1px边框空间——不过这是个好主意@Danield我们还可以在宽度中使用ch单位，以使其更精确：）此外，现在您使用的是

ch

units字体大小不再是一个问题-无论字体大小如何，一个字母总是合适的。@Danield当然可以，但仅限于单空格字体系列；）如果你认为答案不够，我很抱歉。当我在开发我的答案时，我没有看到其他答案，因为其他的任务，我不得不很快地完成输入。尽管如此，我认为它可能有用。

<body>
    <link  href="CSS/style.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Laborator 2(P6)</title>
    <label style="float:left; margin-right:5px;"><b>CNP</b></label>
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />     
    <style>
        body {
          padding: 20px;
        }

        form > div {
          margin: 0 0 20px 0;
        }

        .inputclass1 {
            width:20px;
            border: 1px solid black;
            float:left          
        }
    </style>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('input').keyup(function(){
            if($(this).val().length==$(this).attr("maxlength")){
                $(this).next().focus();
            }
        });
    });
</script>