单击按钮时，应在打字稿中触发输入点击

问题描述

我在页面上显示了一个颜色选择器，如果单击它，它会下拉颜色供您选择。

但是我想做的是我想隐藏颜色选择器，并且仅当单击按钮时才希望它自动单击颜色选择器，以便显示下拉颜色，而不是我单击颜色选择器

<button click.delegate="test">Select a Color</button>

<input type="color" id="color"></input>

这是我尝试过的

 <input type="color" id="color" style="display:none"></input>
    test() {
            let color = document.getElementById("color")
              color.style.display = "block";
            if (color instanceof HTMLElement) {
                color.click();
            }
        }

但是上面的方法不起作用，它没有调用单击以下拉颜色渐变

所以基本上，当单击按钮时，它应该是这样

解决方法

尝试一下

function showColorPickerFunc() {
  let el = document.getElementById("color") 
     if (el.onclick) {
       el.onclick();
    } else if (el.click) {
       el.click();
    }
  }
        

showColorPickerFunc();

#color{
  width: 0px;
  opacity: 0;
}

<button onclick="showColorPickerFunc()">Select a Color</button>

<input type="color" id="color"  />