Question

如何将输入框内文字的颜色更改为不同颜色。例如。文字为绿色，红色，紫色等。我打算使用选择框来存储不同的颜色，并根据所选的颜色更改＆＃34; text＆＃34;颜色：但我很难实现代码。我是js的新手，jquery任何帮助将不胜感激。还需要做些什么才能将具有所选颜色的文本添加到表中（我是否在数据库中保存颜色？）。我将非常感谢您对此提供任何帮助。

Answer 1

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

您可以使用js选择<input class=".." id=".."＆gt;的类或ID 然后，您就可以使用js更改CSS属性。

请参阅以下示例

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

所以你的<input>类是input1。使用以下CSS代码，您可以按名称选择class。请参阅下面的示例

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

现在，通过向该函数添加CSS个color属性，您可以更改现有的CSS规则或将<input>新规则添加到signInAction(){ let that = this; new Oidc.UserManager(this.config).signinRedirectCallback().then(function (user) { that.currentUser = user; that.token = user.access_token; }).catch(function (e) { console.error(e); }); }字段。

我认为你可以在这个例子中走得很远。让我知道它是否有帮助！

Answer 3

我根据您的要求制作了一个小型演示。您可以阅读代码中的注释。

这样的事情：

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

您可以为.green。紫色等每种颜色创建类，只需删除并添加类

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

您还可以使用选定的框颜色更改

添加这些类

jquery，js。自定义文字颜色

5 个答案: