时间戳

首页 > 解决方案 > 显示输入颜色选择器时无法输入输入文本

javascript - 显示输入颜色选择器时无法输入输入文本

问题描述

我试图在有人在文本框上键入内容的同时打开选择器。但是当它打开时会发生什么，我无法在文本框中输入。这是正确的方法吗？还是有更好的方法？

function openPicker(e) {
  e.nextElementSibling.click();
}
.color-picker-container {
    cursor: pointer;
    background-color: transparent;
    flex-grow: 1;
    border-radius: 5px;
    max-height: 15px;
    padding: 5px;
    position: relative;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-picker-text-field {
    background-color: #fff;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    color: #4e4e4e;
    max-height: 15px;
    padding: 4px;
    font-size: 12px;
    min-width: 0px;
    margin: 0px !important;
    border: inherit !important;
    box-shadow: 0 0 10px #dadada;
    width: 50%;
}

.color-picker-field {
    margin: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    max-height: 15px;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
    padding: 0px;
    width: 50px;
    border-left: solid 3px #f0ecf3;
}
<div class="color-picker-container " style="">
      <input type="text" class="color-picker-text-field" value="#ffffff" onclick="openPicker(this);">
      <input class="color-picker-field primary-color-picker" type="color" value="#ffffff">
</div>

标签： javascripthtmlinputcolors

解决方案

input如果其他一些输入处于该focus状态，则您无法与 交互。所以删除下面的行，因为您可以输入第一个input，也可以同时在第二个输入上选择颜色。如果color输入处于focus状态（当您单击first输入时），则您无法输入，因为它正在等待用户输入。

多个 HTML 元素可以同时获得焦点吗？

e.nextElementSibling.click();

当上面的代码被执行时，第二个（颜色）输入将处于focus状态，这将限制另一个输入处于焦点状态，直到用户输入值或输入丢失它的focus.

状态中只能有一个元素focus。

：焦点是元素能够接受输入的时间 - 输入框中的光标或已被选项卡指向的链接。

如果要设置color输入的默认值，请使用value

<div class="color-picker-container " style="">
  <input class="color-picker-field primary-color-picker" type="color" value="#19d763">
</div>

推荐阅读