HTML形式屏蔽格式

-1

<form> 
    Telephone: 
    <input type="text" name="telephone"> 
</form>

我想設置屏蔽此輸入，使其有一個面具一樣xx-xx-xx。

來源

2017-05-25 Gneto Dominique Page Home

https://css-tricks.com/input-masking/ –

[如何實現帶口罩的輸入（HTTPS的可能重複：//計算器。 com/questions/12578507/how-to-implement -a-mask-input- – Ray

您可以在HTML中使用佔位符。

<form> 
    Telephone: 
    <input type="text" name="telephone" placeholder="xx-xx-xx"> 
</form>

然而，當用戶開始輸入，就會有佔位符消失。

來源

2017-05-25 20:15:14 jkys

它不起作用。您所說的佔位符不會以屏幕上所需的格式顯示值。我正在談論掩碼格式模式 –

你可以試試這個：

<html> 
<body> 
<head> 
<style> 
input { 
    font-family: monospace; 
} 
label { 
    display: block; 
} 
div { 
    margin: 0 0 1rem 0; 
} 

.shell { 
    position: relative; 
    line-height: 1; } 
    .shell span { 
    position: absolute; 
    left: 3px; 
    top: 1px; 
    color: #ccc; 
    pointer-events: none; 
    z-index: -1; } 
    .shell span i { 
     font-style: normal; 
     /* any of these 3 will work */ 
     color: transparent; 
     opacity: 0; 
     visibility: hidden; } 

input.masked, 
.shell span { 
    font-size: 16px; 
    font-family: monospace; 
    padding-right: 10px; 
    background-color: transparent; 
    text-transform: uppercase; } 
</style> 
</head> 
<html> 
<body> 
<form action=""> 
    <div> 
    <label for="phn">Phone number</label> 
    <input id="phn" name="telephone" placeholder="XX - XX - XX" pattern="\w\d\w \d\w\d" class="masked" /> 
    </div> 

</form> 

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script> 

</body> 
</html>

來源

2017-05-25 21:35:01

HTML形式屏蔽格式

回答

相關問題