在 Edge 和 Chrome 中使用标准日期选取器时，更改输入字段的文本颜色

Change the text color of my input field when using the standard datepicker in Edge and Chrome

本文关键字：输入 字段 颜色 文本 选取 Chrome Edge 日期 标准      更新时间：2023-09-26
我想

在 Edge 和 Chrome 中的标准日期选择器中进行选择时更改表单上日期字段的背景。

我的查询

$(document).ready(function () {
   $(":input").change(function () {
        toggleEmptyInputs($(this));
   });
});

我的日期字段是：

<input type="date" name="Birthday" class="date mandatory empty validationerror" id="i105">

ID是自动制作的，可以针对不同的形式进行更改。所以我需要使用名称或.....

我真正想要的是当我使用删除类中的空部分datepicker时（基本上这就是 toggleEmptyInputs 函数在我的 jquery 中所做的）。

我尝试使用：

$(":input").datepicker({
    onSelect: function() {
        toggleEmptyInputs($(this));
    }
});

但这不起作用，并且在 Firefox 中也会产生错误，因为Uncaught TypeError: $(...).datepicker不是一个函数。

提前感谢您的帮助

切换功能是 

function toggleEmptyInputs(inputElement) {
    if (inputElement.val()) {
        inputElement.removeClass("empty");
        inputElement.closest(".col").removeClass("hidelabel");
    } else {
        inputElement.addClass("empty");
        inputElement.closest(".col").addClass("hidelabel");
    }
}

并且适用于所有其他领域。

小提琴工作正常，因为 CSS 中的.empty:after {content: "empty"}所以我要把它合并到我的 删除类 函数

谢谢科学怪物

为了方便："我想在选择时更改表单上日期字段的背景"，您只需添加一个类即可。

示例：使用colorme类

$(document).ready(function() {
  $("input[type='date']").change(function() {
    console.log('got here');
    toggleEmptyInputs($(this));
  });
});
function toggleEmptyInputs(inputElement) {
  var hasValue = !!inputElement.val();
  inputElement.toggleClass("empty", !hasValue).toggleClass('colorme', hasValue);
  inputElement.closest(".col").toggleClass("hidelabel", hasValue);
}

.CSS： 

input.colorme {
  color: lime;
  background-color: pink;
}

我已经更改了 

$(document).ready(function()

自

 $(window).load(function ()
相关文章：