У меня есть текстовое поле, в котором пользователь вводит шестнадцатеричное значение для цвета.Текстовое поле изменит цвет на введенное шестнадцатеричное значение, однако проблема заключается в том, что если на входе используется черный цвет или какой-либо темный цвет, очень трудно или невозможно увидеть, какое введенное шестнадцатеричное значение.Поэтому я хочу, чтобы введенный текст имел другой цветной контур, например белый, чтобы пользователь мог ясно видеть, что он ввел.
Это часть моего кода:
<head>
<style>
#ColourInput { /* apply this style to element id="ColourInput" */
left: 240px;
top: 60px;
width: 100px;
}
input[type=text]:focus {
border: 3px solid #555;
</style>
<script>
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);
}
}
</script>
</head>
<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>
Любая помощь будет оценена