入力要素のテキストを色づける方法

Question

私は自分のフォームにトークンを入力していますので、すべてカンマ区切りのトークンに異なる色の背景を付けたいと思います。私の質問は、どのようにすべての要素を値でスタイル付けするのですか、またはそのIDにIDを使用できますか？

私は何をしますか

• 赤の背景を使用するには、赤、青の背景を使用する
• 青、
• 緑色の背景を使用するには、緑、
• など

をしたいですこれを達成するために？ここに私のコードは次のとおりです。

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

Answer 1

、それは追加の内側のHTMLタグの使用を前提としているのであなたはネイティブ入力の値のスタイルを設定することはできません

回避策はでしょう（あなたが本当の子要素を必要とし、リテラルであります！）あなたは、いくつかのjQueryを使用することができます

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>