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

【问题标题】：css in textfield so text is deleted as a word文本字段中的 css，因此文本作为单词被删除
【发布时间】：2013-05-16 05:41:00
【问题描述】：

我试图弄清楚 facebook 如何在下面进行人物高亮标记。

我有一个<textarea>，我想要的是当我按下退格键时，整个名字都会被删除。

我还希望名称以蓝色突出显示（但这很容易）。

这可以通过css轻松完成吗？还是我必须使用某种 javascript 才能使删除工作正常进行？

TLDR：我需要一个 jQuery 函数来删除当我回击时突出显示的名称..仅此而已，不需要自动完成等

【问题讨论】：

CSS 用于样式设置，而不是用于处理数据/事件。为此，您将需要 javascript。就此而言，是的，这是可能的。使用 Jquery 并捕获 keydown/keyup 或 keypress 事件，检查其是否退格，然后删除，直到您点击空格。突出显示也不难，具有类样式，并将该类添加到单词周围的范围中，也可以使用 jquery 添加，可能就足够了。

标签： javascript jquery html css

【解决方案1】：

您可以通过在所需文本后面添加绝对 div 来实现，并使文本区域的背景透明。
这是我刚刚写的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);

【讨论】：

【解决方案2】：

可以使用Jquery Token输入https://github.com/loopj/jquery-tokeninput

更全面的列表在这里： Facebook style JQuery autocomplete plugin

【讨论】：

这个插件有点矫枉过正。我需要一个 jQuery 函数来删除当我按下返回时突出显示的名称……仅此而已。没有自动完成
是的，你不能不做自动完成而只使用删除令牌功能吗？