Toggle input type for date and password-CodePudding

I have 3 disabled input fields and I want to remove password type on hover, but the date is not consistent, it doesn't change to password when I hover over the input field directly. The text works fine. I wonder why it acts like this and how it can be fixed

$('[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>

CodePudding user response：

A bit of experimentation with console.log() showed that the event handlers were not being reliably triggered for the date-type input. Thinking about what is different between a text input and a date input, well obviously the date input includes all kinds of fancy date-related stuff that the browser renders, some of which is dependent on mouse clicks and position. So presumably something about that is interfering with the normal mouseover handlers.

From there it was a simple bit of searching to find this answer which describes how to disable much of that fancy date-input related stuff - by using this CSS:

pointer-events: none !important;

And adding that to your example code solves the problem.

$('[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>