在输入掩码中，我如何使输入的文本变成不同的颜色？

Question

我有一个输入掩码输入电话号码在我的网站上，但我不知道如何使输入的文本黑色，而面具是不透明的。

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

Answer 1

您可以创建第二个输入(具有指针-事件:无和不同的颜色)。

​

$(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">

​