[英]In an input mask, how I make the entered text a different color?
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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.