鼠标悬停时在只读输入框中显示清除按钮答案

【问题标题】：Show clear button in readonly input box on mousehover鼠标悬停时在只读输入框中显示清除按钮
【发布时间】：2017-05-05 15:15:08
【问题描述】：

<input id="my-input" type="search" />

在鼠标悬停时显示一个“x”以清除输入。

当我这样做时，这种行为就消失了

<input id="my-input" type="search" readonly="readonly">

我不得不将我的 Datepicker 输入框设为只读：

$("#my-input").datepicker({ dateFormat: 'yy-mm-dd' }).attr('readonly', 'true');

我怎样才能保留这个只读输入框以前的行为？

【问题讨论】：

基本上你不能。它是“只读的”。 readonly 的全部意义在于不允许用户更改输入的值。为什么您需要用户能够“清除”只读输入？或者如果您希望用户能够与其值进行交互，为什么您的输入是只读的？
它是只读的，所以不能输入无效的日期。能够通过单击清除用户选择的任何日期仍然很方便。
因此您必须制作自己的“清除”按钮。这是唯一的方法。浏览器为您显示“x”以清除输入，但它不会显示交互式“x”，因为您告诉它不要。您通过将其设置为“只读”来告诉它输入是非交互式的。

【解决方案1】：

<input id="my-input" type="search" />

与

$("#my-input").datepicker({ dateFormat: 'yy-mm-dd' }).keydown(function(e) {
    e.preventDefault();
    return false;
});

似乎达到了我的目标。

【讨论】：