javascript - 要获得警报消息，如果颜色对话框关闭而颜色选择没有变化(警告 : colorDialog. style.display = "none";)

Question

这是用于测试的 js fiddle 上的代码 https://jsfiddle.net/em7yfa12/

还有代码在这里:但首先让我解释一下代码的作用。然后我会告诉我我需要达到什么。我自己找不到路。这就是我在这里寻求解决方案的原因。

当按下“打开输入元素以插入文本”按钮时，会出现提示元素以获取文本，稍后会将其绘制为在颜色对话框中选择的颜色。但是这个事件只有在颜色改变时才会发生，因为这个事件是由颜色对话框的变化触发的。

这都是正常的。但我需要一些额外的东西，那就是:

如果打开了颜色对话框并且在关闭对话框之前没有执行任何颜色更改，那么我需要得到:

alert("你必须选择一种不同于你之前选择的颜色来绘制文本");

 <input type="button" id="newlabelID" value="Open input element to insert text  "/></br>
 <input type="color" id="colorDialogID" ></br>
 <a id="aID"> Text to paint</br>

var someText;
function createStatusF(){ 

 someText  = prompt("Enter some text :", ""); 

   if ((someText=="")||(someText==null)){       
      return;
   }


 document.getElementById("colorDialogID").focus();
  document.getElementById("colorDialogID").value = "#FFCC00";
  document.getElementById("colorDialogID").click();

 }

document.getElementById("newlabelID").onclick = createStatusF;
document.getElementById("colorDialogID").style.display = "none";

function peintTheText(){
document.getElementById("aID").innerHTML= someText;
var theColor=document.getElementById("colorDialogID").value;
document.getElementById("aID").style.color=theColor;
}
document.getElementById("colorDialogID").onchange = peintTheText;

Answer 1

您需要使用 input事件并将其附加到颜色输入。这行得通，但是将 alert 与颜色选择器一起使用并不是一个好主意，因为颜色选择器的 z 索引高于警报，因此用户将无法点击它。

这是JS代码:

let someText;
let previousColors = [];
let colorDialog = document.getElementById("colorDialogID");

function openColorPicker() {
  colorDialog.focus();
  colorDialog.value = "#FFCC00";
  colorDialog.click();
}

function createStatusF() {

  someText = prompt("Enter some text :", "");

  if ((someText == "") || (someText == null)) {
    return;
  }
  openColorPicker();
}

document.getElementById("newlabelID").onclick = createStatusF;
document.getElementById("colorDialogID").style.display = "none";

function peintTheText() {
  var theColor = colorDialog.value;
  previousColors.push(theColor);
  document.getElementById("aID").innerHTML = someText;
  document.getElementById("aID").style.color = theColor;
}

function onColorSelected(e) {
  const theColor = colorDialog.value;
  if (previousColors.includes(theColor)) {
    alert("You have to select a different color than any of colors you have selected in previous cases to paint the text");
  }
}

colorDialog.addEventListener('input', onColorSelected);
colorDialog.addEventListener('change', peintTheText);

Working Fiddle