如何在 null 上设置颜色输入的值

Question

我有一个颜色输入，我想将它存储在我的数据库中的空值，但它的默认值是黑色，我该如何将其更改为空值？我删除了值 att 但它仍然具有默认值    <input class="form-control h-50px" type="color" id="example-color-input" name="color_2">

Answer 1

您可以data-*向输入添加一个没有值的属性，然后在输入的值至少更改一次时更新它。

在我的代码段中，一旦单击输入，就会设置实际值（因此，如果您单击它而不更改最后的颜色，它将返回您#000000）。通过删除click事件来删除此行为。

该按钮只是记录输入的值。

document.addEventListener('DOMContentLoaded', () => {

  // INPUT

  const eInput = document.querySelector('input'),

    inputEvent =  () => eInput.dataset.realValue = eInput.value;

  

  eInput.addEventListener('click', inputEvent);

  eInput.addEventListener('change', inputEvent);

  

  // LOG BTN

  const eBtn = document.querySelector('button');

  

  eBtn.addEventListener('click', () => console.log(getColorInputValue(eInput)));

});

/**

 * @param {HTMLElement} element

 * @returns {string|null}

 */

function getColorInputValue(element) {

  return element.dataset.realValue;

}

<input type="color" data-real-value="">

<button>Get color</button>