更改部分文本框輸入的顏色

我想知道是否可以更改文本輸入框顏色的一部分。我創建一個評論插件希望@和之間的一切：改變不同的顏色：更改部分文本框輸入的顏色

<input type="text" placeholder="Want To Say Something?" 
value="@user556: This is a test comment" ng-model="Comment" ng-click="getCurrentPosition()" 
class="form-control ng-valid valid ng-dirty">

這可能與jQuery或JavaScript呢？或者我必須將文本輸入轉換爲div？

來源

2014-04-01 user547794

也許你可以在你想換的部分顏色在span標籤中，然後使用 –

文本輸入和textareas文本不能具有多種顏色。一個簡單的解決方案是在輸入下方提供預覽'div' –

看看twitter如何做到這一點 - 當推文中的字符數量超過160時，它們使用'div'和'span'來實現相同的效果 – callmekatootie

可能，contenteditable元素中，
並與一些JS和一點正則表達式來代替所需的匹配：

function colorify() { 
 
    this.innerHTML = this.textContent.replace(/@([^:]+):/g, "@<span class='user'>$1</span>:"); 
 
} 
 

 
function uncolorify() { 
 
    this.innerHTML = this.textContent; 
 
} 
 

 
[].forEach.call(document.querySelectorAll(".comment"), function(el){ 
 
    el.addEventListener("blur", colorify); 
 
    el.addEventListener("focus", uncolorify); 
 
});

[contenteditable] { 
 
    background:#fafafa; 
 
    padding:8px; 
 
    border-radius:3px; 
 
    border:1px solid #ddd; 
 
} 
 
[contentEditable]:empty:not(:focus):before { 
 
    /*http://stackoverflow.com/a/18368720/383904*/ 
 
    content: attr(data-placeholder); 
 
    color: #777; 
 
} 
 
.user{ 
 
    color: #f0f; 
 
}

(Copy the following text into the contenteditable)<br> 
 
@user547794: Use contenteditable. @johnDoe: nice suggestion btw. 
 
<div class="comment" contenteditable data-placeholder="Want To Say Something?"></div> 
 
Than click outside of the contenteditable.

來源

2016-03-28 04:43:44

更改部分文本框輸入的顏色

回答

相關問題