jquery，js。自定义文本颜色

Question

如何将输入框中的文本颜色更改为不同的颜色。例如。文本为绿色，红色，紫色等。我计划使用选择框来存储不同的颜色，并根据所选颜色更改“文本”颜色：但我很难实现代码。我是新来的js，jquery的任何帮助将不胜感激。还需要做什么才能将选定颜色的文本转换为表格（我是否将这些颜色保存在数据库中？）。我将非常感激得到这方面的帮助。

Answer 1

我根据您的要求做了一个小型演示。您可以阅读代码中的评论。

事情是这样的：

(function() { 
 
    function get(id) { 
 
    return document.getElementById(id); // Return the element given an id. 
 
    } 
 

 
    var selColors = get("selColors"); // Store the context of the selColors element. 
 
    var txtMyText = get("txtMyText"); // Store the context of the txtMyText element. 
 
    var myForm = get("myForm"); // Store the context of the myForm element. 
 
    var selectedColor = get("selectedColor"); 
 

 
    // This is an object that has 2 properties: (color and value). These properties can hold in it string values. 
 
    var obj = { 
 
    color: "", 
 
    value: "" 
 
    }; 
 

 
    // When you select an option. 
 
    selColors.onchange = function() { 
 
    if (this.value.length > 0) { 
 
     obj.color = this.value; // this.value contains the color that you have selected. 
 
     selectedColor.setAttribute("style", "background-color: " + obj.color); 
 
     txtMyText.setAttribute("style", "color: " + this.value); // With this you can set a style to the txtMyText textbox. 
 
    } 
 

 
    }; 
 

 
    // When you submit the form. 
 
    myForm.onsubmit = function(e) { 
 
    obj.value = txtMyText.value; 
 
    console.log(obj); // Shows in the console the object with the current color and value of your textbox. 
 
    e.preventDefault(); 
 
    }; 
 
})();

#myForm { 
 
    border: solid 1px #335a82; 
 
} 
 

 
#myForm fieldset { 
 
    border: solid 1px #a3c9d4; 
 
} 
 

 
#myForm fieldset div { 
 
    margin: 5px; 
 
} 
 

 
#myForm fieldset div label { 
 
    display: inline-block; 
 
    width: 120px; 
 
} 
 

 
#selectedColor { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    width: 120px; 
 
}

<form id="myForm"> 
 
    <fieldset> 
 
    <legend>Configuration</legend> 
 
    <div> 
 
     <label>Colors:</label> 
 
     <select id="selColors"> 
 
    <option value="">[Select a color]</option> 
 
     <option value="#5069b1">#5069b1</option> 
 
     <option value="#ff0000">#ff0000</option> 
 
     <option value="#841b72">#841b72</option> 
 
    </select> 
 
    </div> 
 
    <label>Selected color:</label> 
 
    <div id="selectedColor"> 
 
    </div> 
 
    </fieldset> 
 

 
    <fieldset> 
 
    <legend>Preview</legend> 
 
    <div> 
 
     <label>Text:</label> 
 
     <input id="txtMyText" type="text" /> 
 
    </div> 
 
    <div> 
 
     <button type="submit">Send</button> 
 
    </div> 
 
    </fieldset> 
 

 
</form>

Answer 2

$('#myinput').css("color","#fdd");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="test" id="myinput">

你也试试这个：

$('#myinput').css('color',$('#myinput').val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="#04edee" id="myinput" onkeyup="$('#myinput').css('color',$('#myinput').val());">

Answer 3

你可以用js来选择<input class=".." id=".."> 的类或ID，那么你会能够改变CSS属性与js同流。

请看下面的例子

<form method="post"> 
<input type="text" class="input1"> 
</form> 

所以你<input>类是输入1。使用以下CSS代码，您可以通过名称选择class。通过添加CSS属性附加伤害像color的功能，你可以更改现有或添加新CSS规则，你<input>场见下文

<script> 
function myFunction() { 
    var x = document.getElementsByClassName("example"); 
} 
</script> 

现在的例子。

我想你可以用这个例子得到很多。 让我知道它是否有帮助！

Answer 4

jQuery的选项来显示一些有趣的东西：

$(function() { 
 
    $('#myColors').on('change', function() { 
 
    var picked = $(this).val(); 
 
    $('#currentcolor').css("background-color", picked); 
 
    $('#results').append("<div>" + $(this).find("option:selected").text() + "|" + picked + "</div>"); 
 
    }); 
 
    // verbose add on click of button 
 
    $('#addHot').on('click', function() { 
 
    var valHot = '#69b4ff'; 
 
    var newName = "Hot Pink Triadic Blue"; 
 
    //$('#myColors').append("<option value='"+valHot+" style='color:"+nameHot+"'>"+nameHot+"</option>"); 
 
    var newOpt = $("<option></option>"); 
 
    newOpt.css("color:" + valHot); 
 
    newOpt.prop("value", valHot); 
 
    newOpt.text(newName); 
 
    newOpt.appendTo('#myColors'); 
 
    console.log(newOpt); 
 
    }); 
 
});

<div> 
 
    <select id="myColors"> 
 
    <option value="red" style="color:red">Red</option> 
 
    <option value="green" style="color:green">Green</option> 
 
    <option value="cyan" style="color:cyan">Cyan</option> 
 
    <option value="#0080ff" style="color:#0080ff">Analogous Cyan</option> 
 
    </select> 
 
    <button id="addHot" type="button"> 
 
    Add Hot Pink Triadic Blue 
 
    </button> 
 
</div> 
 
<div> 
 
    <div id="currentcolor"> 
 
    current color is background 
 
    </div> 
 
    <div id="results"> 
 
    Show stuff: 
 
    </div> 
 
</div>

Answer 5

你能做什么C reate类一样。绿色.purple每一种颜色，只是删除和添加类

$(".input1").addClass("red").removeClass("green"); 

，你还可以添加这些类与选择框颜色变化