I have an input mask for entering phone numbers on my website but I can't figure out how to make the entered text black while the mask is opaque.
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
<script>
$(document).ready(function(){
$("#Phone-2").inputmask({"mask" : "(999) 999-9999" , "placeholder": "(123) 456-7890", "clearMaskOnLostFocus": false});
});
</script>
<style>
#Phone-2{
opacity: 25%;
}
}
</style>
You can create second input (with pointer-events: none, and different color)
$(document).ready(function() {
$("#Phone-2").inputmask({
"mask": "(999) 999-9999",
"placeholder": "(123) 456-7890",
"clearMaskOnLostFocus": false
});
$("#Phone-2").wrap("<div class='Phone-Wrapper'/>");
$("#Phone-2").parent().append('<input class="Phone-Wrapper-Input">');
$('body').on('keyup keydown change', '#Phone-2', function() {
$(this).parent().find('.Phone-Wrapper-Input').val(
$(this).val().substr(0, $(this)[0].inputmask.caretPos.begin)
)
})
});#Phone-2 {
opacity: 25%;
}
.Phone-Wrapper {
position: relative;
}
.Phone-Wrapper-Input {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
background: transparent;
border-color: transparent;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js"></script>
<input type="text" id="Phone-2">