在文本字段中的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