Javascript 文本字段中的css，因此文本作为单词删除

我想弄清楚facebook上的人是如何突出下面的标签的

我有一个

，我想要的是，当我按backspace键时，整个名字都会被删除

我还想用蓝色突出显示这个名字（但这个很简单）

这可以通过css轻松实现吗？或者我必须使用某种javascript来使删除工作正常吗

TLDR：我需要一个jQuery函数来删除我按下back键时突出显示的名称。仅此而已，不需要自动完成之类的功能

---

您可以使用Jquery令牌输入

更全面的清单如下：

---

您可以在所需文本后面添加一个绝对div，并使文本区域的背景透明。
这是我刚刚写的一封信，可能会对你有所帮助
我只是在向突出显示的div添加正确的左位置时遇到了一些问题。

html:

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

Javscript：

$(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);

$（文档）.ready（函数（e）{
$（'.text_区域'）.bind（'keypress'，函数（e）{
var代码=（e.keyCode？e.keyCode:e.which）；
如果（代码==64）{
$（'.text\u area'）.val（$（'.text\u area'）.val（）+“Ayman”）
line=$（'.text\u area'）.val（）.substr（0，$（'.text\u area'）.selectionStart）.split（“\n”）.length；
var hl=$（“”）；
$（hl）.css（{'left'：$（'text_area'）.getCursorPosition（）+“px”，'top'：（（行*14）-12）+“px”}）
$（'.container'）。追加（$（hl））
}
});
});
（函数（$，未定义）{
$.fn.getCursorPosition=函数（）{
var el=$（this.get）（0）；
var-pos=0；
如果（'selectionStart'在el中）{
pos=el.selectionStart；
}else if（文档中的“选择”）{
el.focus（）；
var Sel=document.selection.createRange（）；
var SelLength=document.selection.createRange（）.text.length；
Sel.moveStart（'字符'，-el.value.length）；
pos=Sel.text.length-SelLength；
}
返回pos；
}
})（jQuery）；

CSS用于设置样式，而不是用于操纵数据/事件。您将需要javascript来实现这一点。在这方面，是的，这是可能的。使用Jquery并捕获keydown/keypup或keypress事件，检查其退格是否正确，并删除直到找到空格为止。突出显示也不难，有一个类样式，并将该类添加到单词周围的一个范围内（您也可以使用jquery添加），可能就足够了。我需要一个jQuery函数来删除我按back时突出显示的名称。仅此而已。没有自动完成是的，难道你就不能不做自动完成，只使用删除令牌功能吗？

$(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);