在文本字段中的CSS，所以文本被删除作为一个字

Question

我想弄清楚如何Facebook下面的人突出显示标记。

我有一个<textarea>和我想要的是，当我按下退格时，全名被删除。

而且我也希望名称以蓝色突出显示（但这个很简单）。

这可以很容易地通过css？或者我必须使用某种javascript删除的东西工作？

TLDR：我需要一个jQuery函数删除高亮显示的那个名字，当我按back..that的一切，不需要自动完成与此类

Answer 1

你可以通过在所需文本背后添加绝对div来实现，并使背景对textarea透明。
这是我刚刚写的一个snippet of code，它可能会帮助你。
我刚刚遇到一些问题，将正确的左侧位置添加到突出显示的div。

HTML：

<div class='container'> 
    <div class='highlighted'></div> 
    <textarea class='text_area'>hi my name is Ayman</textarea> 
</div> 

CSS：

.custom_table{ 
position: relative; 
width:600px; 
} 

.row{ 
position: relative; 
height:40px; 
background: #c80000; 
border-top:1px solid #fff; 
} 

.row div{ 
color:#fff; 
text-align: center; 
line-height:40px; 
} 
.row:hover .first, 
.row:hover .second, 
.row:hover .third, 
.row:hover .fourth{ 
background:#522D2D;; 
cursor:pointer; 
} 

.first{ 
position: absolute; 
left:0%; 
right:80%; 
height:40px; 
background: #00c800; 
} 

.second{ 
position: absolute; 
left:20%; 
right:60%; 
height:40px; 
background: #0000c8; 
} 

.third{ 
position: absolute; 
left: 40%; 
right: 25%; 
height: 40px; 
background: #BEBECF; 
} 

.fourth{ 
position: absolute; 
left: 75%; 
right: 0%; 
height: 40px; 
background: #D6182F; 
} 

JavsScript：

$(document).ready(function(e){ 
$('.text_area').bind('keypress', function(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 64){ 
     $('.text_area').val($('.text_area').val()+" Ayman") 
     line = $('.text_area').val().substr(0, $('.text_area').selectionStart).split("\n").length; 
     var hl = $("<div class='highlighted'></div>"); 
     $(hl).css({'left':$('.text_area').getCursorPosition()+"px", 'top': ((line*14)-12)+"px"}) 
     $('.container').append($(hl)) 
    } 
}); 
}); 

(function ($, undefined) { 
$.fn.getCursorPosition = function() { 
    var el = $(this).get(0); 
    var pos = 0; 
    if('selectionStart' in el) { 
     pos = el.selectionStart; 
    } else if('selection' in document) { 
     el.focus(); 
     var Sel = document.selection.createRange(); 
     var SelLength = document.selection.createRange().text.length; 
     Sel.moveStart('character', -el.value.length); 
     pos = Sel.text.length - SelLength; 
    } 
    return pos; 
} 
})(jQuery); 

Answer 2

您可以使用jQuery令牌输入https://github.com/loopj/jquery-tokeninput

更全面的名单是在这里： Facebook style JQuery autocomplete plugin