更改電話號碼佔位符，並且它是在模糊和焦點

Phone:<br> 
 
<input type="text" id="phone" name="phone" placeholder="Please enter your phone number">

The input box looks like this to begin with

On click/focus, it looks like this

在鍵入數字值，下劃線應該得到更換或數字應該得到輸入過下劃線

我試過類似

<input type="text" name="theName" placeholder="Please enter your phone number" 
 
    onblur="if(this.placeholder!==''){ this.value='Please enter your phone number'; this.style.color='#BBB';}" 
 
    onfocus="if(this.placeholder=='Please enter your phone number'){ this.value='___-___-____'; this.style.color='#000';}" 
 
    style="color:#BBB;" />

但正如我開始輸入電話號碼，我想讓它變得鍵入了下劃線，而不是像他們現在。

來源

2017-08-10 manishk

我相信你的問題沒有簡單的答案，你可以使用這裏提到的庫：https：//css-tricks.com/input-masking/。 – Javad

輸入掩碼正是我所期待的。不知道這個名字是知道的。謝謝！（我能夠解決它，並將其作爲答覆發佈） – manishk

插入這2 jQuery的插件 -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>

的HTML的其餘部分包含以下Jquery的功能和簡單的輸入框，電話號 -

<script> 
 
$(document).ready(function($){ 
 
\t $('#phone').mask('999-999-9999', {placeholder:'xxx-xxx-xxxx'}); 
 

 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<form action=""> 
 
    
 
<input type='text' name='phone' id='phone' placeholder='enter phone no.'> 
 

 
</form> 
 
</body>

來源

2017-08-11 21:11:27 manishk

更改電話號碼佔位符，並且它是在模糊和焦點

回答

相關問題