编辑:(已修复）

Question

我需要像facebook一样放置富有评论的文本框。

目前，我已经开发了一个jquery插件，你可以找到它在http://jsfiddle.net/mike_ivanenko/k6zH6/3/

上工作

您可以使用以下插件。

$(document).ready(function() {
    $('#ttt').richtextbox( {
            highlights: [
                {char:'#', class:'highlighted', markup: 'topic'},
                {char:'@', class:'highlighted', markup: 'people'}
            ]
            ,change:function(richtextfield, input) {
                $('#output').val(input.val());
            }
        }
    );
});

通过键入hash（＃）来放置主题非常有效，但我找不到通过键入@来处理人名的方法。

我的意图如下。

当用户输入@时，带有搜索文本字段的下拉框将显示在当前文本框的正下方，用户可以搜索该名称。

然后结果将显示在下拉列表中，点击该项目将在主文本字段中输入。但它应该是不可编辑的。可以通过[删除]或[退格]键删除。

有什么建议吗？

或者请在github.com/mike-ivanenko/richtextbox

上帮助我

谢谢

麦克

Answer 1

你应该查看html5的contenteditable功能

编辑:(已修复）

这就是你需要的 http://jsfiddle.net/ZQSHT/2/

$('div').keyup(function(){
    var test = $(this).text();

if( test.indexOf('@') >= 0){
  // Found world
    alert('@');
    $('input').focus();
}
});
$('input').change(function(){
    alert( $('input').val() );
    $('div').append('<a href="http://www.mysite.com/profiles/#">@'+$('input').val()+'</a>');
});

富文本框，如Facebook评论框

1 个答案:

编辑:(已修复）