制作自定义输入文本类型答案

【问题标题】：Making a custom input text type制作自定义输入文本类型
【发布时间】：2018-03-25 13:11:17
【问题描述】：

我想做这个

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

.input {
  width: 200px;
  border: 1px solid black;
}

<label><b>CNP</b></label>
<input class="input" type="text" name="CNP">

【问题讨论】：

只需创建一个 webcomponent。

标签： html css

【解决方案1】：

更新：感谢@Danield 的cmets，我更新了更合适的单位。

你可以使用线性渐变，但是如果你想在一个槽内有一个字母，你需要注意不同的大小和字体系列：

.input {
  /* each letter will take 1ch + 1px and we remove 1px of the last one*/
  width: calc(15 * (1ch + 1px) - 1px);
  border: 1px solid black;
  background: 
  /* 1ch space for the letter + 1px border */
  repeating-linear-gradient(to right, #fff, #fff 1ch, #000 1ch, #000 calc(1ch + 1px));
  font-size: 29px;
  /*since a letter will take 1ch we add 1px to cover the border*/
  letter-spacing: 1px; 
  /*we use a monospace font-family so all the letter will take the same width = 1ch*/
  font-family: monospace;
}

<input class="input" type="text" maxlength="15" name="CNP">
<p>This will work with any font-size</p>
<input class="input" type="text" maxlength="15" name="CNP" style="font-size:35px;">

【讨论】：

只是一个挑剔;) - ch 单位在这里可能比 px 更合适，letter-spacing: 1px 可以考虑额外的 1px 边框空间 - codepen.io/danield770/pen/zWEGNj - 好主意！跨度>
@Danield 我们也可以在宽度中使用 ch 单位以使其更准确:)
另外，现在您使用 ch 单位字体大小不再是问题 - 无论字体大小如何，一个字母始终适合。
@Danield 当然，但仅限于等宽字体系列；)

【解决方案2】：

你可以用 javascript 来做，但让我们继续使用 html5 和 css，你可以看到 here:

使用 maxlenght 属性：

<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">

记得创建一个类或使用 bootstrap 类 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>

【讨论】：

【解决方案3】：

 <!DOCTYPE html>
 <html>
 <head>
 <link  href="CSS/style.css" rel="stylesheet" type="text/css">
 <title>Laborator 2(P6)</title>
 <style>
  input {
    width: 1.5em;
    border: 1px solid black;
  }
 </style>
 </head>
 <body>

 <div>
     <label><b>CNP</b></label>

     <input type="text" size=1 maxlength=1>
     <input type="text" size=1 maxlength=1 style="margin-left:-5px">
     <input type="text" size=1 maxlength=1 style="margin-left:-5px">

 </div>
 </body>

请注意，CSS 中的 input 元素是一个元素选择器。

【讨论】：

如果您认为答案不够充分，我深表歉意。我在开发我的时候没有看到其他答案，并且因为其他承诺而不得不快速完成输入。不过我认为它可能有用。

【解决方案4】：

你可以使用重复线性渐变和间距来实现它，但是如果你想添加自动标签效果，你必须使用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>

【讨论】：