Javascript 在文本框中概述用户文本输入

我有一个程序，用户在文本框中输入一个十六进制值，一旦按下提交按钮，文本框本身就会变成十六进制值所代表的颜色。我遇到的问题是，当用户输入一种深色（如

#000000

）时，文本将变得不可见

所以为了解决这个问题，我想创建一个浅色的文本轮廓，这样用户就可以看到他们在框中键入的内容

有人建议我使用

文本阴影：#000 0px 0px 1px，#000 0px 0px 1px，#000 0px 0px 1px，但它不符合我的要求。我不能使用jQuery或任何类似的东西，只能使用纯Javascript、HTML和CSS

这是我的代码：

#ColourInput { /* apply this style to element id="ColourInput" */
    left: 240px;
    top: 60px;
    width: 100px;
    height: 20px;
    text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}


input[type=text]:focus {
  border: 3px solid #555;
}


function fnCustomColour() {
    var sHexValue = document.getElementById("ColourInput").value;
    var ValueValid = 0
    fnDebugMessage(sHexValue);

    if (/[0-9A-F]{6}$/i.test(sHexValue)) {

        if (sHexValue.indexOf("#") === 0) {

        } else {
            sHexValue = "#"+sHexValue 
        }
        ValueValid = 1

    } else {
        alert("Value not allowed");
        ValueValid = 0
    }

    if (ValueValid = 1) {
        ColourInput.style.backgroundColor = sHexValue;
        fnSetFillColour(sHexValue);
        fnDebugMessage(sHexValue);
    }

}

<div id="CustomColour">
    Custom Colour Input: #<input type="text" id="ColourInput" name="CustomColour" placeholder="Enter Hex Value" pattern="[a-fA-F0-9]{8}$/i"><br>
    <input type="submit" onclick="fnCustomColour();" id="ColourSubmit" value="Submit">
</div>

#colorInput{/*将此样式应用于元素id=“colorInput”*/
左：240px；
顶部：60px；
宽度：100px；
高度：20px；
文本阴影：#000 0px 0px 1px，#000 0px 0px 1px，#000 0px 0px 1px；
}
输入[类型=文本]：焦点{
边框：3px实心#555；
}
函数fncustomcolor（）{
var sHexValue=document.getElementById（“colorInput”）.value；
var ValueValid=0
fnDebugMessage（sHexValue）；
if（/[0-9A-F]{6}$/i.test（sHexValue））{
if（sHexValue.indexOf（“#”）==0）{
}否则{
sHexValue=“#”+sHexValue
}
ValueValid=1
}否则{
警报（“不允许值”）；
ValueValid=0
}
如果（ValueValid=1）{
colorInput.style.backgroundColor=sHexValue；
FnsetFillColor（sHexValue）；
fnDebugMessage（sHexValue）；
}
}
自定义颜色输入：#


任何帮助都将不胜感激
我在黑色文本周围添加了一个白色阴影。这很像电视上的闭路字幕。我用黑色对黑色进行了测试，你可以调整snippit中的颜色，看到它在绿色、黄色、蓝色等颜色下运行


#颜色输入{
/*将此样式应用于元素id=“colorInput”*/
左：240px；
顶部：60px；
宽度：100px；
高度：20px；
文本阴影：0px0#fff，0#fff，0 1px0#fff，0#fff；
颜色：黑色；
背景：黑色；
}
}
输入[类型=文本]：焦点{
边框：3px实心#555；
}

自定义颜色输入：#

我在黑色文本周围添加了一个白色阴影。这很像电视上的闭路字幕。我用黑色对黑色进行了测试，你可以调整snippit中的颜色，看到它在绿色、黄色、蓝色等颜色下运行


#颜色输入{
/*将此样式应用于元素id=“colorInput”*/
左：240px；
顶部：60px；
宽度：100px；
高度：20px；
文本阴影：0px0#fff，0#fff，0 1px0#fff，0#fff；
颜色：黑色；
背景：黑色；
}
}
输入[类型=文本]：焦点{
边框：3px实心#555；
}

自定义颜色输入：#

如果我理解正确，您的文本也是黑色的。。然后添加黑色阴影不太可能使文本可见。。为文本添加白色阴影或使用互补色如何（）？您可以通过如下阴影实现：
文本阴影：#FFF 2px 0px 0px，#FFF 1px 1px 2px，#FFF 0px 2px 1px0xffffff^color
。如果我理解正确，您的文本也是黑色的。。然后添加黑色阴影不太可能使文本可见。。为文本添加白色阴影或使用互补色如何（）？您可以通过如下阴影实现：
文本阴影：#FFF 2px 0px 0px，#FFF 1px 1px 2px，#FFF 0px 2px 1px0xffffff^color
。。