1. 首頁
  2. 問答
  3. 如何在html中創建一個類似數字分隔符的輸入框？

如何在html中創建一個類似數字分隔符的輸入框？

2017-02-27 23 views

回答

0

如果你想完全工作的代碼，那麼你可能需要使用CSS和JavaScript以及HTML。我寫了一個包含10位數字輸入和一個按鈕的示例代碼。它具有以下三個功能。

1.每個數字只允許數字，數字的長度爲1.這意味着您不能輸入多個數字。

2.一旦輸入數字，光標自動移至下一位數字。

3.點擊按鈕（獲取電話號碼），您將輸入的電話號碼作爲警報。

您可以根據需要更改代碼。

代碼：

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

輸出：

enter image description here

你可以看到在這裏工作代碼：https://jsfiddle.net/sampathcse16/m4m4kty8/4/

來源

2017-02-27 07:45:28

+0

謝謝，但如何插入這個電話號碼到mysql數據庫？ –

0

可以很容易地實現這一點使用border，span和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; 
}

演示：https://jsfiddle.net/yLd8k5zk/

注：主容器的寬度=內部容器*沒有inner-的寬度容器

來源

2017-02-27 06:37:42

相關問題

 相關問題