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"); 

，你還可以添加這些類與選擇框顏色變化