切换日期和密码的输入类型

Question

我有3个禁用的输入字段，我想在悬停时删除密码类型，但日期不一致，当我直接悬停在输入字段上时，它不会更改为密码。文本工作良好。我想知道为什么它会这样做，以及如何修复它

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

Answer 1

对console.log()的一些实验表明，对于date类型的输入，事件处理程序并没有被可靠地触发。想想text输入和date输入之间的不同之处，很明显，date输入包括浏览器呈现的各种花哨的日期相关的东西，其中一些依赖于鼠标点击和位置。因此，这可能会干扰正常的鼠标悬停处理程序。

从那里它是一个简单的搜索找到这个答案，它描述了如何禁用许多花哨的date输入相关的东西-通过使用这个CSS:

pointer-events: none !important;

并将其添加到示例代码中解决问题。

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