MASKフォーマットは

-1

これは現在のフォームです：MASKフォーマットは

<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の –

可能な重複：// stackoverflowの。 com/questions/12578507/how-to-implement-with-a-mask） – 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

答えて

関連する問題