onchange, чтобы изменить цвет текста внутри contenteditable

Question

В настоящее время у меня есть поле выбора, в котором есть варианты разных цветов, а также contenteditable внутри div, который будет использоваться в качестве текстового редактора. Я хочу, когда я выбираю цвет из окна, например. красный, выделенный текст внутри контекстно-зависимых изменений будет красным.

 <select id="colorChange"> 
      <option onchange="value="Black">Black</option> 
      <option value="Red">Red</option> 
      <option value="Blue">Blue</option> 
      <option value="Green">Green</option> 
      <option value="Yellow">Yellow</option> 
      <option value="Pink">Pink</option> 
     </select> 

Answer 1

OnChange вариантов вызова метода функции и использование JQuery .css для изменения цвета текста.

function changeColor(){ 
var _color = $("#colorChange option:selected").val().toLowerCase(); 
$("#abc").css('color',_color) 
} 

Примечание: Существует опечатка в <option onchange="value="Black">Black</option>

JSFIDDLE

Answer 2

Попробуйте это :)

$('#colorChange').on('change', function() { 
 
    $color = this.value 
 
    $("select option:selected").css("color", $color); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="colorChange"> 
 
      <option onchange="value="Black">Black</option> 
 
      <option value="Red">Red</option> 
 
      <option value="Blue">Blue</option> 
 
      <option value="Green">Green</option> 
 
      <option value="Yellow">Yellow</option> 
 
      <option value="Pink">Pink</option> 
 
     </select> 
 
          

Answer 3

Вот jQuery решение.

1. onchange должно быть на select.
2. Применить выбранный цвет к div.

$(function() { 
 
    var color = 'black'; 
 

 
    $('select').change(function() { 
 
    color = $(this).val(); 
 
    $('div').css('color', color); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="colorChange"> 
 
    <option value="Black">Black</option> 
 
    <option value="Red">Red</option> 
 
    <option value="Blue">Blue</option> 
 
    <option value="Green">Green</option> 
 
    <option value="Yellow">Yellow</option> 
 
    <option value="Pink">Pink</option> 
 
</select> 
 
<br/> 
 
<br/> 
 
<div contenteditable="true">This text color will change based on selection</div>

Answer 4

Прослушивайте событие изменения на входе выбора, захватить его значение, а затем изменить цвет вашего контейнера с помощью CSS.

$('#colorChange').change(function(){ 
     var selectedColor = this.value; 
     $('#container').css('color', selectedColor); 
    }); 

Этот метод будет работать при использовании названия цветов, поддерживаемые всеми браузерами (http://www.w3schools.com/cssref/css_colors.asp), если вы хотите пользовательские цвета, вам нужно будет либо установить значение параметров в выберите вход на значение HEX (#) для цвет требуется или передать selectedColour через оператор switch, чтобы определить цветовой код.

Answer 5

Javascript версия. Я действительно надеюсь, что я не буду делать домашнее задание.

document.getElementById('colorChange').addEventListener('change',function(event){ 
    var val = event.target.value; 
    var div = document.getElementById('editableDiv'); 
    div.style.color = val; 
});