Блог

Главная - Вопросы по программированию - добавьте средство выбора цвета поверх добавленного дочернего элемента

добавьте средство выбора цвета поверх добавленного дочернего элемента

#html

#HTML

Вопрос:

Итак, у меня есть скрипт, который добавит текстовое поле, и я хочу добавить поверх этого текстового поля цветовое колесо, также я использую electron, если это поможет. Любая помощь приветствуется!

 <input class="addcommandbtn" type="button" id="addCommand" style="width: 6.5%;" value="  Command">
<select name="commandslist" id="commandslist" size="18%" style="height: 59%;width: 15%; display: block; border: 1px solid #dcdcdc; border-radius: 6px; margin-top: 5px;"></select>
 <script>
        function createCommandField() {
            var input = document.createElement('option');
            input.style.marginTop = "1%";
            input.textContent = "command";
            input.name = 'Commands[]';
            input.style.display = 'block'
            input.style.boxShadow = 'inset 0px 1px 0px 0px #ffffff';
            input.style.border = '1px solid #dcdcdc';
            input.style.borderRadius = '6px';
            input.style.height = "2%";
            input.style.padding = '5px 30px';
            input.style.fontFamily = "Arial";
            input.style.fontWeight = "bold";
            input.style.fontSize = "17px";
            return input;
        }
   var select = document.getElementById('commandslist');
        document.getElementById('addCommand').addEventListener('click', function (e) {
            select.appendChild(createCommandField());
        });

</script>

Комментарии:

1. вам нужно добавить средство выбора цвета к добавленному дочернему элементу или вам нужно выбрать цвет перед добавлением дочернего элемента? также вам нужен любой инструмент выбора цвета, например, кнопка, чтобы получать из нее цвета, или вам нужно создать колесо выбора цвета?

2. я хочу добавить во входную переменную ввод типа color

3. вы можете использовать input.innerHTML = '<input type="color" value="#ff00ee" style="float:left;">'; перед return input строкой, но для запуска средства выбора цвета требуется JS, если оно включено в список опций, поэтому оно бесполезно и не может быть использовано

Ответ №1:

вот скрипт jquery, позволяющий изменить ввод цвета при РЕДАКТИРОВАНИИ: выбранная опция дважды щелкните

добавлена функция для применения выбранного цвета на фоне того же выделения и отмены его выбора для улучшения эффекта,

удачи,

 function createCommandField() {
  var input = document.createElement('option');
  input.style.marginTop = "1%";
  input.textContent = "command";
  input.name = 'Commands[]';
  input.style.display = 'block'
  input.style.boxShadow = 'inset 0px 1px 0px 0px #ffffff';
  input.style.border = '1px solid #dcdcdc';
  input.style.borderRadius = '6px';
  input.style.height = "2%";
  input.style.padding = '5px 30px';
  input.style.fontFamily = "Arial";
  input.style.fontWeight = "bold";
  input.style.fontSize = "17px";

  return input;

}

$(document).ready(function() {
    var bgclr ='';
    var parentopt = $('#pckrbg');
  $('#commandslist').change(function() {
    var crntslct = $('#commandslist').children('option:selected');
    crntslct.dblclick(function() {
        parentopt.click();
        parentopt.change(function(){
            bgclr = parentopt.val();
            $('#commandslist').prop("selectedIndex", function(){
                $(this).children('option:selected').css("background", bgclr); //set background
                $(this).children('option:selected').prop("selected", false); //deselect option;
            });
        });     
    });
  });
});

var select = document.getElementById('commandslist');
document.getElementById('addCommand').addEventListener('click', function(e) {
  select.appendChild(createCommandField());
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span><input type="color" value="#FFEE00"  id="pckrbg" name="colorz" style="position:relative; display:none; float:left; margin-right:1rem; bottom:3px;"></span>
<form class="myformclass" style="font-family: sans-serif;font-size:20px;" id="myForm" onsubmit="return validateForm()">
  <input class="addcommandbtn" type="button" id="addCommand" style="width: 6.5%;" value="  Command">
  <input class="addcommandbtn" type="button" id="removeCommand" style="width: 7.2%;" value="- Command" onclick="removeCommandFunc()">
  <input class="savebtn" type="button" id="saveCommands" style="width: 4%; float: right;" value="Save" onclick="SaveToLocalStorage()">
  <!-- Retrive Button <input class="Retrive" type="button" id="Callback" value="Retrive From LocalStorage" style="float:right;margin-right:3rem;" > -->
  <select name="commandslist" id="commandslist" size="5%" style="width: 50%; display: block; border: 1px solid #dcdcdc; border-radius: 6px; margin-top: 5px;"></select>
  <select name="resplist" id="resplist" size="18%" style="height: 20%;width: 59%; display: block; border: 1px solid #dcdcdc; border-radius: 6px; margin-top: 5px; margin-left: 20%;"></select>
</form>

Комментарии:

1. я хочу создать элемент color при нажатии кнопки, затем установить его положение в положение другого элемента, а элемент color должен находиться поверх второго элемента

2. sry не могли бы вы объяснить это подробнее?

3. вы можете видеть, что он добавляет текстовое поле

4. когда он добавляет текстовое поле, я также хочу добавить средство выбора цвета внутри этого текстового поля

5. прежде всего, вы могли бы удалить ненужные комментарии таким образом, и в любом случае просто скажите мне в одном комментарии, что именно вы хотите сделать, чтобы я мог помочь, удачи