更改电话号码占位符，并且它是在模糊和焦点

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

更改电话号码占位符，并且它是在模糊和焦点

回答

相关问题