web-dev-qa-db-de.com

Wie wird das Eingabefeld so partitioniert, dass es als separate Eingabefelder auf dem Bildschirm erscheint

Schau dir das Bild an:

 enter image description here

Ich möchte so etwas wie auf dem Bild entwerfen, wo ein vierstelliges Einmalpasswort (OTP) vom Benutzer eingegeben werden muss. Im Moment habe ich dies durch 4 separate Eingaben und anschließendes Kombinieren von Werten in Javascript erreicht:

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

Ich bin nicht sicher, ob dies korrekt ist. Ich denke, es muss ein paar Styling-Optionen geben, mit denen ein Eingabetextfeld wie im Bild partitioniert angezeigt wird. Ist es möglich, Bootstrap zu verwenden? Wie kann man ein Eingabesteuerelement so gestalten, dass es als partitioniertes Eingabefeld erscheint?

13
Karan Desai

Sie müssen nicht 4 separate Felder aufbewahren;

Zuerst sollten Sie den Zeichenabstand anpassen und dann den Randstil des unteren Bereichs anpassen.

#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 soll 5 Unterstriche für Hässlichkeit von 4 Zeichen festlegen--

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>

Ich denke, dass dies ein Ausgangspunkt sein kann ....__ hoffe, dass dies helfen wird ...

17
Ufuk Onder

Ich würde einfach diesen Ansatz mit vier Feldern beibehalten und allen diesen Event-Handler hinzufügen.

  1. Prüfen Sie, ob die Eingabe gültig ist (in der Zeichenklasse akzeptieren Sie).
  2. Prüfen Sie, in welchem ​​Feld Sie sich befinden, und verschieben Sie den Fokus zum nächsten Feld oder zur OK-Schaltfläche.

Sie können sogar ein kleines separates JS dafür schreiben und es wiederverwenden.

3
Dan

Hoffe, diese Lösung hilft dir. Sie können onfocus event aus input elements entfernen, wenn Sie möchten.

<body>
  <head>
    <style>
      input[type=number] {
          height: 45px;
          width: 45px;
          font-size: 25px;
          text-align: center;
          border: 1px solid #000000;
      }
      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    </style>
    <script>
      function getCodeBoxElement(index) {
        return document.getElementById('codeBox' + index);
      }
      function onKeyUpEvent(index, event) {
        const eventCode = event.which || event.keyCode;
        if (getCodeBoxElement(index).value.length === 1) {
          if (index !== 4) {
            getCodeBoxElement(index+ 1).focus();
          } else {
            getCodeBoxElement(index).blur();
            // Submit code
            console.log('submit code ');
          }
        }
        if (eventCode === 8 && index !== 1) {
          getCodeBoxElement(index - 1).focus();
        }
      }
      function onFocusEvent(index) {
        for (item = 1; item < index; item++) {
          const currentElement = getCodeBoxElement(item);
          if (!currentElement.value) {
              currentElement.focus();
              break;
          }
        }
      }
    </script>
  </head>
  <body>
    <form>
        <input id="codeBox1" type="number" maxlength="1" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)"/>
        <input id="codeBox2" type="number" maxlength="1" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)"/>
        <input id="codeBox3" type="number" maxlength="1" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)"/>
        <input id="codeBox4" type="number" maxlength="1" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)"/>
    </form>
  </body>
</body>

1
Jagraj Singh

Sie können die folgende Anweisung verwenden, wenn Sie AngularJS verwenden

In Ihrem HTML hinzufügen

<div otp-input-directive options="otpInput"></div>

In Ihrem Controller hinzufügen

$scope.otpInput={
        size:6,
        type:"text",
        onDone: function(value){
            console.log(value);
        },
        onChange: function(value){
            console.log(value);
        }
    };

Plunker link

Aussehen und Verhalten der UI-Komponente

https://github.com/amstel91/otp-input-directive

0

Ich weiß nicht, wie man eine Eingabe in html5 aufteilt, vielleicht können Sie in css dieselbe Klasse verwenden, um Ihre Eingabe zu steuern, und Sie können die Eingabe mit Stil versehen, etwa:

div{
   text-align:center;
   background:#eee;
}
input{
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    width: 100px;
    text-align:center;
    padding : 5px;
    margin-left:10px;
}
button{
  margin-top:20px !important;
  margin: 0 auto;
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
<div>
    <input class="form-control" placeholder="0" maxlength="1"  />
    <input class="form-control" placeholder="0" maxlength="1"  />
    <input class="form-control" placeholder="0" maxlength="1"  />
    <input class="form-control" placeholder="0" maxlength="1"  />
    <br><button type="button" onclick="myFunction()">Submit</button>
    <p id="optRes"></p>
</div>    

Definieren Sie myFunction () und Sie können Ihr Array durch Ihre Klasse erhalten: Form-Control, in String konvertieren und dann in Int, wenn Sie es überprüfen müssen. Hilft das?

0
Teshtek