-2

enter image description here Wie mache ich ein Eingabefeld wie Number Seperator in HTML?

Ich möchte diese Art Eingabefeld machen. Aber ich kenne den genauen HTML-Code nicht. Plase Hilf mir.

2017-02-27 sanjay natta

Wenn Sie voll funktionsfähigen Code wollen, dann müssen Sie möglicherweise CSS und Javascript zusammen mit HTML verwenden. Ich habe einen Beispielcode geschrieben, der 10 Ziffern der Eingabe und eine Schaltfläche enthält. Es macht die folgenden drei Funktionen.

1.Jede Ziffer erlaubt nur Zahlen und die Länge einer Ziffer ist 1. Dies bedeutet, dass Sie nicht mehr als eine Ziffer eingeben können.

2.Nach Eingabe einer Ziffer springt der Cursor automatisch zur nächsten Ziffer.

3.Durch Klicken auf die Schaltfläche (Get Phone Number) erhalten Sie die eingegebene Telefonnummer als Alarm.

Sie können den Code nach Ihren Bedürfnissen ändern.

Code:

<!DOCTYPE html> 
<html> 
<style type="text/css"> 
table,td{ 
border-collapse: collapse; 
padding:0; 
border:2px solid black; 
} 
td input{ 
width:20px; 
} 

</style> 

<script type="text/javascript"> 
var currentDigit = 1; 
function isNumberKey(evt){ 
    var charCode = (evt.which) ? evt.which : event.keyCode 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) 
     return false; 
    return true; 
} 

function moveToNextInputDigit(e){ 
    currentDigit = parseInt(e.id.replace("digit","")); 
    currentDigit++; 
    if(e.value.length == 1 && currentDigit<=10 && document.getElementById("digit"+currentDigit).value.length!=1) 
    { 
     document.getElementById("digit"+currentDigit).focus(); 
    } 
} 

function getPhoneNumber() 
{ 
var phoneNumber = ""; 
for(var i=1;i<=10;i++) 
{ 
    phoneNumber += document.getElementById("digit"+i).value; 
} 

    alert("Phone Number: "+ phoneNumber); 
} 

</script> 

<body> 

<table> 
<tr> 
<td><input id="digit1" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit2" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit3" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit4" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit5" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit6" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit7" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit8" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit9" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit10" type="text"maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
</tr> 
</table> 

<input type = "button" value="Get Phone Number" onClick="getPhoneNumber()"> 
</body> 
</html>

Ausgang:

Sie hier arbeiten Code sehen: https://jsfiddle.net/sampathcse16/m4m4kty8/4/

Quelle

2017-02-27 07:45:28

Danke, aber wie diese Telefonnummer in der MySQL-Datenbank einfügen? –

können Sie leicht implementieren diese mit border, span und CSS,

<div class="main-container"> 
    <span class="inner-container"> 
     <input class="input-style" type="text" maxlength="1" value="2"> 
    </span> 
    <span class="inner-container"> 
     <input class="input-style" type="text" maxlength="1" value="2"> 
    </span> 
    <span class="inner-container"> 
     <input class="input-style" type="text" maxlength="1" value="2"> 
    </span> 
    <span class="inner-container"> 
     <input class="input-style" type="text" maxlength="1" value="2"> 
    </span> 
    <span class="inner-container"> 
     <input class="input-style" type="text" maxlength="1" value="2"> 
    </span> 
    <span class="inner-container"> 
     <input class="input-style" type="text" maxlength="1" value="2"> 
    </span> 
    <span class="inner-container"> 
     <input class="input-style" type="text" maxlength="1" value="2"> 
    </span> 
</div> 

.main-container{ 
    border: 2px solid #000; 
    width:180px; 
} 
.inner-container{ 
    border: 1px solid #000; 
} 
.input-style{ 
    width:20px; 
    text-align:center; 
    border:0px; 
}

Demo: https://jsfiddle.net/yLd8k5zk/

HINWEIS: Breite des Hauptcontainers = Breite des Innenbehälters * keine der inner Container

Quelle

2017-02-27 06:37:42

Wie mache ich ein Eingabefeld wie Number Seperator in HTML?

Antwort

Code:

Ausgang:

Verwandte Themen