Tengo 3 campos de entrada deshabilitados y quiero eliminar el tipo de contraseña al pasar el mouse, pero la fecha no es consistente, no cambia a contraseña cuando paso el mouse sobre el campo de entrada directamente. El texto funciona bien. Me pregunto por qué actúa así y cómo se puede solucionar.
$('[data-masked="text-container"]').on('mouseenter', function() { $(this).children('input').attr("type", "text"); }) $('[data-masked="text-container"]').on('mouseleave', function() { $(this).children('input').attr("type", "password"); }) $('[data-masked="date-container"]').on('mouseenter', function() { $(this).children('input').attr("type", "date"); }) $('[data-masked="date-container"]').on('mouseleave', function() { $(this).children('input').attr("type", "password"); }) div { background: red; margin-top: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-masked="text-container"> <input type="password" disabled value="hello"> </div> <div data-masked="text-container"> <input type="password" disabled value="yooooo"> </div> <div data-masked="date-container"> <input type="password" disabled value="2013-01-08"> </div>Un poco de experimentación con console.log() mostró que los controladores de eventos no se activaban de manera confiable para la entrada de tipo de date . Pensando en lo que es diferente entre una entrada de text y una entrada de date , obviamente la entrada de date incluye todo tipo de cosas sofisticadas relacionadas con fechas que el navegador representa, algunas de las cuales dependen de los clics del mouse y la posición. Entonces, presumiblemente, algo de eso está interfiriendo con los controladores normales de mouseover.
A partir de ahí, fue una simple búsqueda para encontrar esta respuesta que describe cómo deshabilitar gran parte de esa date elegante, cosas relacionadas con la entrada, mediante el uso de este CSS:
pointer-events: none !important;Y agregar eso a su código de ejemplo resuelve el problema.
$('[data-masked="text-container"]').on('mouseenter', function() { $(this).children('input').attr("type", "text"); }) $('[data-masked="text-container"]').on('mouseleave', function() { $(this).children('input').attr("type", "password"); }) $('[data-masked="date-container"]').on('mouseenter', function() { $(this).children('input').attr("type", "date"); }) $('[data-masked="date-container"]').on('mouseleave', function() { $(this).children('input').attr("type", "password"); }) div { background: red; margin-top: 10px; } input[type=date] { color: blue; /* just to confirm our css is being applied */ pointer-events: none !important; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-masked="text-container"> <input type="password" disabled value="hello"> </div> <div data-masked="text-container"> <input type="password" disabled value="yooooo"> </div> <div data-masked="date-container"> <input type="password" disabled value="2013-01-08"> </div>