Question

为了让人们更容易输入长密码，我想将一个输入表单分为4个部分，如下图所示。

例如，CSS中是否可以这样做？

我想避免必须制作4种不同的输入形式，并检查每一种形式的代码部分是否正确。

开头的小提琴

以及相应的代码：

github

Answer 1

HTML：

<input type="text" class="creditCardText" />

Javascript：

$('.creditCardText').keyup(function() {  var foo = $(this).val().split("-").join(""); // remove hyphens  if (foo.length > 0) {
foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");}  $(this).val(foo);});

你可以尝试这个...... Demo

Answer 2

                    <input id="telInput" 
                    type="tel" 
                    size="4" 
                    required="true" 
                    pattern="\[0-9]{3}\"
                    placeholder="359"/>



                    <input id="telInput" 
                    type="tel" 
                    size="4" 
                    required="true" 
                    pattern="[0-9]{3}\"
                    placeholder="888"/>

                    -

                    <input id="telInput" 
                    type="tel" 
                    size="12" 
                    required="true" 
                    pattern="[0-9]{2}\[0-9]{2}\[0-9]{2}"
                    placeholder="888888"/>

我是在网站上使用输入ID完成的。 https://jsfiddle.net/v8kkfjeo/1/

Answer 3

您可以使用Gradients来获取该内容。

input.form-control {
  border: none;
  outline: none;
  box-shadow: none;
  background-image: linear-gradient(to left, white calc(.5em + 1px), black calc(.5em + 1px), black calc(.5em + 2px), transparent 0), linear-gradient(to right, black 1px, transparent 0), linear-gradient(to bottom, black 1px, transparent 0), linear-gradient(to top, black 1px, transparent 0);
  background-size: 3em 100%;
  /* background-repeat: no-repeat; */
  font-size: 28px;
  padding: 0px;
  font-family: monospace;
  width: 11.5em;
}

<强> Working Fiddle

在不同的部分划分单个输入表单

3 个答案: