Отображать шестнадцатеричный цвет как цвет фона текстового поля после преобразования значения rbg в шестнадцатеричный код с использованием javascript

Question

<input type="text"  name="red"  id="txtRed"/>
<input type="text" name="green" id="txtGreen" />
<input type="text" name="blue"  id="txtBlue"/>
<input type="text"  id="displaycolor" style="height:50px;width:50px" />

Это мой взгляд, у меня есть 4 текстовых поля (красный, синий, зеленый и цвет дисплея) во время ввода rgb для текстового поля, и в то же время я хочу преобразовать rgb в шестнадцатеричный код цвета, покажите, что hex цвет в 4-м текстовом поле. `

function rgbToHex(r, g, b) {
    var r = $("#txtRed").val();
    var g = $("#txtGreen").val();
    var b = $("#txtBlue").val();
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

$("#txtRed").keypress(function () {         
    rgbToHex();
})
$("#txtGreen").keypress(function () {
    rgbToHex();
})
$("#txtBlue").keypress(function () {
    rgbToHex();
})

var componentToHex = function (rgb) {
    debugger
    var hex = Number(rgb).toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

это мой код javascript, преобразование работает, я не знаю, как отобразить этот шестнадцатеричный цвет в этом 4-м текстовом поле, пожалуйста, помогите мне

Answer 1

Вы просто получаете элемент и устанавливаете значение следующим образом:

$("#displaycolor").css('background-color',color)

Answer 2

в функции rgbToHex, вы можете использовать:

function rgbToHex(r, g, b) {
         var r = $("#txtRed").val();
         var g = $("#txtGreen").val();
         var b = $("#txtBlue").val();
         var hex = "#" + componentToHex(r) + componentToHex(g) + componentToHex(b)
         $("#displaycolor").css('backgroud-color',hex)
}

Answer 3

Используйте keyup вместо keypress

$("#txtRed, #txtGreen, #txtBlue").on('keyup', function () {         
    var r = $("#txtRed").val();
    var g = $("#txtGreen").val();
    var b = $("#txtBlue").val();
    var color = "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    $("#displaycolor").val(color).css({'background-color':color});
});

function componentToHex (rgb) {
    var hex = Number(rgb).toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"  name="red"  id="txtRed"/>
<input type="text" name="green" id="txtGreen" />
<input type="text" name="blue"  id="txtBlue"/>
<input type="text"  id="displaycolor" style="height:50px;width:50px" />

Answer 4

Чтобы сделать эту работу необходимой вам, вам просто нужно установить hex результат как val() поля #displaycolor.

Однако вы должны заметить, что вы можете DRY это закодировать и улучшить его несколькими способами. Например, присваивая общие классы для вызова единого обработчика событий для всех элементов, предоставляя значения rgb в качестве аргументов для функции rgbToHex(), разделяя логики вычислений и извлечения данных c в функциях (ie. Single Принцип ответственности), а также путем установления пределов введенного значения 0-255. Попробуйте это:

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r || 0) + componentToHex(g || 0) + componentToHex(b || 0);
}

var componentToHex = function(value) {
  return ('00' + parseInt(value, 10).toString(16)).slice(-2);
}

$(".rgb-update").on('input', function() {
  var r = Math.min(parseInt($('#txtRed').val(), 10) || 0, 255);
  var g = Math.min(parseInt($('#txtGreen').val(), 10) || 0, 255);
  var b = Math.min(parseInt($('#txtBlue').val(), 10) || 0, 255);
  var hex = rgbToHex(r, g, b);
  $('#displaycolor').val(hex).css('background-color', hex);
}).trigger('input');

#displaycolor {
  height: 75px;
  width: 75px;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="red" id="txtRed" class="rgb-update" maxlength="3" size="3" value="255" />
<input type="text" name="green" id="txtGreen" class="rgb-update" maxlength="3" size="3" value="255" />
<input type="text" name="blue" id="txtBlue" class="rgb-update" maxlength="3" size="3" value="255" />

<p>
  <input type="text" name="hex" id="displaycolor" readonly="true" />
</p>

Я бы предложил использовать range входы, чтобы еще больше помочь с последними.

Answer 5

Вам просто нужно добавить дополнительный шаг, который на самом деле устанавливает содержание и цвет ввода displaycolor для сгенерированного вами значения.

Примерно так будет:

function setDisplayColor() {
  var color = rgbToHex();
  $('#displaycolor').val(color);
  $('#displaycolor').css('background-color', color);
}

Вы также должны использовать событие keyup вместо keypress, и в этих вызовах setDisplayColor():

$("#txtRed").keyup(function () {
  setDisplayColor();
});

Следующий фрагмент кода показывает это в действии:

function rgbToHex(r, g, b) {
  var r = $("#txtRed").val();
  var g = $("#txtGreen").val();
  var b = $("#txtBlue").val();
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function setDisplayColor() {
  var color = rgbToHex();
  $('#displaycolor').val(color);
  $('#displaycolor').css('background-color', color);
}

$("#txtRed").keyup(function () {
  setDisplayColor();
});
$("#txtGreen").keyup(function () {
  setDisplayColor();
});
$("#txtBlue").keyup(function () {
  setDisplayColor();
});

var componentToHex = function (rgb) {
  var hex = Number(rgb).toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="red" id="txtRed"/>
<input type="text" name="green" id="txtGreen" />
<input type="text" name="blue" id="txtBlue"/>
<input type="text" id="displaycolor" style="height:50px;width:100px" />