1

Facebookが以下の人物ハイライトのタグ付けをどのように行うかを理解しようとしています。

私が<textarea>欲しいのは、バックスペースを押すと名前全体が削除される機能です。

また、名前を青色で強調表示したかった (しかし、これは簡単です)。

これはcssで簡単に実行できますか? または、削除を機能させるために何らかのJavaScriptを使用する必要がありますか?

TLDR: ボタンを押したときに強調表示されている名前を削除する jQuery 関数が必要でした..それだけです。オートコンプリートなどは必要ありません。

ここに画像の説明を入力

4

2 に答える 2

1

Jquery トークン入力https://github.com/loopj/jquery-tokeninputを使用できます

より包括的なリストはこちら: Facebook スタイルの JQuery オートコンプリート プラグイン

于 2013-05-16T05:51:21.173 に答える
1

必要なテキストの後ろに絶対 div を追加して作成し、テキストエリアの背景を透明にすることができます。
ここに私が書いたばかりのコードのスニペットがあります。
強調表示された 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;
}

JavaScript :

$(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);
于 2013-05-16T07:14:21.143 に答える