更改部分文本框输入的颜色

我想知道是否可以更改文本输入框颜色的一部分。我创建一个评论插件希望@和之间的一切：改变不同的颜色：更改部分文本框输入的颜色

<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

更改部分文本框输入的颜色

回答

相关问题