jquery – 如何为input元素的文本着色

2019年7月21日 161次阅读

我的表单中有一个令牌输入,所以我希望每个逗号分隔的令牌都有不同的颜色背景.我的问题是如何按值设置每个元素的样式,还是可以在值中使用id？

我想要

>红色使用红色背景,
>蓝色使用蓝色背景,
>绿色使用绿色背景,
>等

我该怎么做才能做到这一点？这是我的代码：

<input value="red,blue,green"
       type="text"
       id="exampleInlineTags"
       class="form-control token-example-field"
       name="search"
       placeholder="Enter tags" />

最佳答案 你不能原生地设置输入的值,因为它假定使用额外的内部HTML标记(这是文字的,你需要真正的子元素！)

解决方法是使用可信的DIV

function toColorTokens() {
  $(this).html( // Remove whitespaces & Create our SPAN elements
    $(this).data("value").replace(/\s/g, "").replace(/[^,]+/g, function(m) {
      return "<span style='background:"+ m +";'>"+ m +"</span>";
    })
  ); 
}

function removeColorTokens() {
  $(this).text( $(this).data("value") );
}

function storeDataValue() {
  $(this).data("value", $.trim($(this).text()));
}

$("[contenteditable]").on({
  input    : storeDataValue,    // update data-value on input
  keypress : function(e) { return e.which !== 13; }, // Prevent Enter key
  focus    : removeColorTokens, // decolorify on focus
  blur     : toColorTokens      // colorify on blur
  
}).trigger("blur");             // Do it now!
[contenteditable]{
  border:1px solid #ddd;
  padding:4px 8px;
  border-radius:3px;
}
[contenteditable]:empty:not(:focus):before{
  content:attr(data-placeholder);
  color:#888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable data-value="red,green,blue,#F00BA4" data-placeholder="Enter tags"></div>
点赞