如何检查字符串"绿色"是否在Jquery中是否有效？

Question

我有用户提供颜色名称的场景.为此我首先需要检查用户提供的颜色名称是否有效使用jquery.

例如,用户可以提供值橙色,ornge拼写错误.

怎么检查.

任何帮助对我来说都是最好的.

Answer 1

您可以使用以下方法来验证css颜色

1. 创建一个临时元素
2. 使用设置任何颜色 css('backgroundColor', 'white')
3. 用输入值作为backgroundColord.css('backgroundColor',this.value)后应用;
4. 检查颜色是否已更改或输入的值与我们最初设置的值相同,在这种情况下它是有效颜色

$('#input').keyup(function() {
  if (this.value.trim()) {
    var d = $('<span/>')
      .css('backgroundColor', 'white')
      .css('backgroundColor', this.value);
    $('#op').html(this.value + (d.css('backgroundColor') == '' && this.value + (d.css('backgroundColor') != 'white' && d.css('backgroundColor') != 'rgb(255, 255, 255)') || /^white$/i.test(this.value) ? ' is valid' : ' is not valid'));
  } else
    $('#op').empty();
});

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

<div id="op"></div>