onchange zum Ändern der Textfarbe in contenteditable

Question

Ich habe derzeit eine Auswahlbox, die Optionen in verschiedenen Farben sowie eine contenteditable innerhalb einer div als Text-Editor verwendet werden kann. Was ich will ist, wenn ich eine Farbe aus der Box z. rot, ändert sich der ausgewählte Text innerhalb des Contentable rot.

 <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 von Call-Optionen eine Funktion und Verwendung jquery .css Methode, um die Änderung der Textfarbe.

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

Hinweis: Es ist ein Tippfehler in <option onchange="value="Black">Black</option>

JSFIDDLE

Answer 2

Try this :)

$('#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

Hier die jQuery Lösung.

1. onchange muss auf select sein.
2. Wenden Sie die ausgewählte Farbe auf div an.

$(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

Hören Sie auf das Änderungsereignis auf dem Select-Eingang, greift sein Wert dann die Farbe des Containers mit CSS ändern.

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

Diese Methode funktioniert, wenn sie von allen Browsern (http://www.w3schools.com/cssref/css_colors.asp), wenn Sie benutzerdefinierte Farben wünschen Sie müssen entweder den Wert der Optionen in der Auswahl Eingang mit dem HEX (#) Wert Unterstützte Farbnamen für die erforderliche Farbe oder übergeben Sie selectedColour durch eine switch-Anweisung, um den Farbcode zu bestimmen.

Answer 5

Javascript-Version. Ich hoffe wirklich, dass ich deine Hausaufgaben nicht mache.

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